レンダリング機能で範囲外のReactJSアクセス変数

私は、自分のコンポーネントの1つでインポートしてレンダリング/ループスルーする設定ファイルを持っています。設定ファイル：component.jsをファイルレンダリング機能で範囲外のReactJSアクセス変数

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'] 
    }, 
    ], 
};

data.config.js

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

}

期待コンソールO/P：私は取得しています

name : Lynda 
age : 53 
userid : 7896

結果： Uncaught SyntaxError: Unexpected identifier as value of ${clientData} is [object Object]

どのようにして、clientDataとotherDataのキーとレンダリング関数内の値にアクセスできますか？

出典

2017-08-28 user988544

「../設定/クライアント/ data.config.js'から 'インポート{データ}; ''にconsole.log（）は 'コンストラクタに何を言っていますか？ – Nocebo

私は元の投稿を更新します – user988544

私はこれらのconstが間違った行で宣言されていると思います。帰りの前にする必要があります。レンダリングの前にdangerouslySetInnerHTML propに入って、その文字列を単一の変数として使用する文字列を作成しようとすることができます。 – bennygenel

テンプレート文字列の仕組みを誤解しているようです。彼らはただちに文字列を作成し、各${thing}はその文字列値のthingに置き換えられます。

私が似たようなことをして文字列を印刷するときに何が起こるかを確認してください。あなたはそれがどのように動作するかを見

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

？ clientDataはオブジェクトなので、文字列の一部として[object Object]を生成しています。

JSを危険にして生成したい場合（私が徹底的にアドバイスする）、コードを生成してから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);

私はあなたが本当にトリッキーな何かをやっている場合を除き、その後<script>タグにそのコードをラップする理由はありませんことを指摘したいと思います。そのまま実行してください。結局のところ、あなたはすでにいくつかのJSを実行中です。すぐに残りの部分を実行してください。

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

出典

2017-08-28 19:05:04

ありがとうございました。これは大いに役立ちます。最初にスクリプトタグの一部としてアクセスしようとしていた理由は、値に基づいて実行時にGTM（Googleタグマネージャ）のプロパティとデータレイヤーの値を設定するためです。値は危険なSetInnerHTMLの一部として、そのスクリプトタグの私は読み込んで、Googleタグ解析を宣言しているので、助けてくれません – user988544

レンダリング機能で範囲外のReactJSアクセス変数

答えて

関連する問題