La variable d'accès ReactJS hors de portée dans la fonction de rendu

J'ai un fichier de configuration que je voudrais importer et faire défiler/boucler dans l'un de mes composants. Le fichier de configuration:La variable d'accès ReactJS hors de portée dans la fonction de rendu

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 déposent

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> 
) 

}

console prévue o/p:

name : Lynda 
age : 53 
userid : 7896

Résultat que je reçois: Uncaught SyntaxError: Unexpected identifier as value of ${clientData} is [object Object]

Comment puis-je accéder à la clé client et aux autres clés et valeurs de la fonction de rendu?

Source

2017-08-28 user988544

'importation {données} de » ../ config/client/data.config.js', '' qu'est-ce un console.log() 'dire dans le constructeur? – Nocebo

Je vais mettre à jour le message original – user988544

Je crois que ces const sont déclarées dans la mauvaise ligne. Le devrait être avant le retour. vous pouvez essayer de créer la chaîne qui va aller dans dangerouslySetInnerHTML prop avant le rendu et utiliser cette chaîne comme une seule variable. – bennygenel

Vous semblez mal comprendre le fonctionnement des chaînes de modèles. Ils créent immédiatement une chaîne où chaque ${thing} est remplacé par la valeur de chaîne de ce thing.

Vérifiez ce qui se passe lorsque je fais quelque chose de similaire et que j'imprime la chaîne.

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);

Vous voyez comment cela fonctionne? Puisque clientData est un objet, il génère [object Object] dans le cadre de la chaîne.

Si vous voulez vraiment générer dangereusement certains JS (ce que je déconseille vivement), alors pensez à générer le code avant de l'injecter au format 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);

Je voudrais souligner que, à moins que vous faites quelque chose, vraiment difficile, il n'y a aucune raison de conclure que le code dans une balise <script>. Il suffit de le lancer tel quel. Après tout, vous êtes déjà en train de courir quelques JS. Mai aussi bien gérer le reste tout de suite.

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]); 
 
    } 
 
}

Source

2017-08-28 19:05:04

Merci de m'avoir parlé de ça. Cela aide beaucoup. La raison pour laquelle j'essayais initialement d'y accéder dans le cadre des balises de script est que, en fonction des valeurs, j'ai paramétré les propriétés de GTM (google tag manager) et les valeurs de datalayer lors de l'exécution, c'est pourquoi j'essaie de comprendre valeurs dans le cadre de dangerouslySetInnerHTML, puisque c'est dans ce tag de script que je charge et déclare google tag analytics, en les mettant en dehors de l'aide ne – user988544

La variable d'accès ReactJS hors de portée dans la fonction de rendu

Répondre

Questions connexes