ReactJS Zugriffsvariable außerhalb des Bereichs in Render-Funktion

Ich habe eine Konfigurationsdatei, die ich möchte importieren und Rendering/Schleife in einer meiner Komponenten. Die Konfigurationsdatei:ReactJS Zugriffsvariable außerhalb des Bereichs in Render-Funktion

data.config.js

export const data = { 

    clientData: { 
    name:'Lynda', 
    age:'53', 
    userid:7896 
    }, 
    otherData: [ 
    { 
     option1: 'good;', 
     option2: {type: 'confirmed'}, 
     option3: ['u','g','l','y'] 
    }, 
    { 
     option1: 'awesome;', 
     option2: {type: 'temporary'}, 
     option3: ['u','g'] 
    }, 
    ], 
};

component.js

Datei

import { data } from '../config/client/data.config.js'; 
.. 

var clientData = data.clientData; // console o/p returns object key and values 
var otherData = data.otherData; // console o/p returns object key and values 

.. 

render() { 
    const { 
     title, 
     favicon, 
     socialMediaDesc, 
     socialMediaImg, 
     ... 
    } = this.props; 

... 
    return(
    <html className="no-js" lang="en"> 
     <title>{title}</title> // works as expectec 
     ... 

     <script dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger 
     __html: ` 

     for (var client in ${clientData}) { 
      if (${clientData}.hasOwnProperty(client)) { 
      (function(key, value) { 
       console.log(key, " : ", value); 
      })(client, ${clientData}[client]); 
      } 
     }; 
     `, 
     }} 
    </html> 
) 

}

Erwartete Konsole o/p:

name : Lynda 
age : 53 
userid : 7896

Ergebnis, das ich erhalte: Uncaught SyntaxError: Unexpected identifier as value of ${clientData} is [object Object]

Wie kann ich innerhalb der Renderfunktion auf clientData und andereData-Schlüssel und -Werte zugreifen?

Quelle

2017-08-28 user988544

'Import {data} von‘ ../ config/Client/data.config.js'; 'was macht ein' console.log() 'im Konstruktor sagen? – Nocebo

Ich werde den ursprünglichen Beitrag aktualisieren – user988544

Ich glaube, diese Const sind in der falschen Zeile deklariert. Das sollte vor der Rückkehr sein. Sie können versuchen, die Zeichenfolge, die in dangerousSetInnerHTML prop vor dem Rendern gehen wird, zu erstellen und diese Zeichenfolge als eine einzelne Variable verwenden. – bennygenel

Sie scheinen zu verstehen, wie Template-Strings funktionieren. Sie erstellen sofort eine Zeichenfolge, wobei jeweils ${thing} durch den Zeichenfolgenwert thing ersetzt wird.

Überprüfen Sie, was passiert, wenn ich etwas ähnliches tun und nur die Zeichenfolge drucken.

const clientData = { 
 
    name: 'Lynda', 
 
    age: '53', 
 
    userid: 7896 
 
}; 
 

 
const html = ` 
 
for (var client in ${clientData}) { 
 
    if (${clientData}.hasOwnProperty(client)) { 
 
    (function(key, value) { 
 
     console.log(key, " : ", value); 
 
    })(client, ${clientData}[client]); 
 
    } 
 
}`; 
 

 
console.log(html);

Sie sehen, wie das funktioniert? Da clientData ein Objekt ist, wird [object Object] als Teil der Zeichenfolge generiert.

Wenn Sie wirklich gefährlich JS erzeugen wollen (von dem ich gründlich abraten würde), dann überlegen Sie, den Code vorher zu generieren, dann injizieren Sie es als HTML.

const clientData = { 
 
    name: 'Lynda', 
 
    age: '53', 
 
    userid: 7896 
 
}; 
 

 
let html = ''; 
 
for (var client in clientData) { 
 
    if (clientData.hasOwnProperty(client)) { 
 
    html += ` 
 
(function(key, value) { 
 
    console.log(key, " : ", value); 
 
})(${client}, "${clientData[client]}");`; 
 
    } 
 
} 
 

 
console.log(html);

Ich mag darauf hinweisen, dass, wenn Sie etwas wirklich schwierig dann tun kein Grund gibt es, dass Code in einem <script> Tag zu wickeln. Lauf einfach so wie es ist. Schließlich bist du schon mitten in der Ausführung von JS. Möge der Rest auch gleich laufen.

const clientData = { 
 
    name: 'Lynda', 
 
    age: '53', 
 
    userid: 7896 
 
}; 
 

 
for (var client in clientData) { 
 
    if (clientData.hasOwnProperty(client)) { 
 
    (function(key, value) { 
 
     console.log(key, " : ", value); 
 
    })(client, clientData[client]); 
 
    } 
 
}

Quelle

2017-08-28 19:05:04

Danke, dass Sie mich durch dieses Thema geführt haben. Das hilft sehr. Der Grund, warum ich anfänglich versuchte, auf sie als Teil von Skript-Tags zuzugreifen, ist, dass ich basierend auf den Werten GTM (google tag manager) -Eigenschaften und DataSlayer-Werte zur Laufzeit festlege, deshalb versuche ich zu verstehen, ob ich auf diese zugreifen kann Werte als Teil von dangerouslySetInnerHTML, da in diesem Skript-Tag ich Google Tag-Analysen laden und deklariere, wird das Einstellen von Außenseiten nicht helfen – user988544

ReactJS Zugriffsvariable außerhalb des Bereichs in Render-Funktion

Antwort

Verwandte Themen