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访问变量超出了范围在渲染功能

回答

相关问题