仅第一次调用 React 标签脚本答案

【问题标题】：React tag script are called only the first time仅第一次调用 React 标签脚本
【发布时间】：2015-03-05 07:51:34
【问题描述】：

我正在尝试在我的 react 组件上添加一个脚本，并且每次渲染组件时都必须调用此脚本..

这是一个例子：

var ReactComponent = React.createClass({
  render: function() {
    var html = '<script>console.log("A")</script>';
    console.log("B");

    return (
        <div>
          <div dangerouslySetInnerHTML={{__html: html}} />
        </div>
    );
  }
});

但是当我查看我的控制台时，我得到了这个组件的 3 个渲染：

B 
A // Logged the first render
B // Now, only the 'B' is called.
B

代替

B 
A // Log A every time
B 
A // Log A every time
B 
A // Log A every time

【问题讨论】：

内容没有改变，所以 React 跳过了真正的 DOM 的改变。 render 每次都被调用，但是文档中的<script> 没有被重写。这是设计使然。

标签： javascript reactjs script-tag

【解决方案1】：

如前所述，React 仅在渲染之间的内容更改时才将更改输出到 DOM。由于您的脚本标签永远不会改变，因此它永远不会被再次调用。

您对脚本标签元素有多少控制权？如果您直接在字符串中写出脚本标记，就像您的问题一样，您可以向元素添加一个随机数，这将导致 React 每次调用 render 时重新渲染：

var ReactComponent = React.createClass({
  render: function() {
    var randomId = Math.random();
    var html = '<script data-id="'+ randomId +'">console.log("A")</script>';
    console.log("B");

    return (
        <div>
          <div dangerouslySetInnerHTML={{__html: html}} />
        </div>
    );
  }
});

【讨论】：

【解决方案2】：

难道仅仅执行脚本就足够了吗？例如使用 eval()。

【讨论】：

在这个例子中可能是的，但它是一个带有 src 属性的脚本标签，它加载一个文件：/