ReactJS訪問變量超出了範圍在渲染功能

我有一個配置文件，我想導入和渲染/循環通過我的一個組件。配置文件：ReactJS訪問變量超出了範圍在渲染功能

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文件

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]

如何訪問render函數內的clientData和其他數據鍵和值？

來源

2017-08-28 user988544

從」 ../配置/客戶/ data.config.js''進口{}數據;'請問一個'的console.log（）'在構造函數中說呢？ – Nocebo

我會更新原始帖子 – user988544

我相信那些const聲明在錯誤的行中。應該在返回之前。你可以嘗試創建一個字符串，它會在再次渲染之前在危險的SetInnerHTML 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（谷歌標記管理器）屬性和數據層值，這就是爲什麼我想了解我是否可以訪問它們值作爲dangerouslySetInnerHTML的一部分，因爲它在該腳本標記中加載並聲明Google標記分析，將它們設置在外面不會幫助 – user988544

ReactJS訪問變量超出了範圍在渲染功能

回答

相關問題