ReactJS在渲染函数中访问变量超出范围答案

【问题标题】：ReactJS access variable out of scope in render functionReactJS在渲染函数中访问变量超出范围
【发布时间】：2017-08-28 18:55:52
【问题描述】：

我有一个配置文件，我想在其中一个组件中导入和渲染/循环。配置文件：

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

}

预期的控制台操作：

name  :  Lynda
age  :  53
userid  :  7896

我得到的结果：Uncaught SyntaxError: Unexpected identifier as value of ${clientData} is [object Object]

如何访问渲染函数中的 clientData 和 otherData 键和值？

【问题讨论】：

import { data} from '../config/client/data.config.js'; 构造函数中的console.log() 是什么意思？
我会更新原帖
我相信那些 const 是在错误的行中声明的。应该在返回之前。您可以尝试在再次渲染之前创建要进入危险SetInnerHTML prop 的字符串，并将该字符串用作单个变量。
@user988544 它现在看起来可以工作了，但是渲染函数应该返回一个字符串或一个反应组件。你要返回多个东西。我只是指出未来可能出现的问题，因为您可以看到我没有将其添加为答案。另一件事是我建议您使用 window.jQuery 对象 componentDidMount 而不是将 javascript 代码添加为 HTML 字符串，因为它不是实现的好方法
@user988544 返回中间的const 不可能正常工作。那是 100% 无效的语法。你应该确认你已经保存并编译了你的代码，因为我向你保证那行不通。

标签： javascript reactjs scope jsx

【解决方案1】：

您似乎误解了模板字符串的工作原理。他们立即创建一个字符串，其中每个${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]);
  }
}

【讨论】：

感谢您引导我完成这些。这很有帮助。我最初尝试将它们作为脚本标签的一部分访问的原因是因为基于这些值，我在运行时设置了 GTM（谷歌标签管理器）属性和数据层值，这就是为什么我试图了解我是否可以访问这些值作为危险SetInnerHTML的一部分，因为它在那个脚本标签中我加载并声明了谷歌标签分析，将它们设置在外面不会有帮助