Question

我试图在我的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

Answer 1

如上所述，当呈现之间的内容发生变化时，React仅输出对DOM的更改。由于您的脚本标记永远不会更改，因此永远不会再次调用它。

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

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

Answer 2

不仅仅是执行脚本就足够了吗？例如，使用eval（）。

React标记脚本仅在第一次调用

2 个答案: