javascript - React 将脚本 JS 添加到组件

Question

我尝试将 JS 脚本添加到 React 组件，但没有附加任何内容。显示消息 Hello 但不显示脚本。swcript 与组件 Canvas 位于同一存储库。我尝试像这样添加它：

class Accueil extends Component {

render() {
    return (
    <div>
        <Canvas/>
    </div>
    );
}

}

class Canvas extends Component {
componentDidMount() {
  const script = document.createElement("script");
      script.async = true;
      script.src = "./Sketch.js";
      this.div.appendChild(script);
      }

render() {
  return (
    <div className="App" ref={el => (this.div = el)}> 
    <h1>Hello</h1>
      {/* Script is inserted here */}
    </div>
  );
}

}

但是当我直接在页面顶部插入脚本 Sketch 时，从 './Sketch.js' 导入 {Sketch}

该脚本很好地添加，但它也适用于其他组件，所以我认为这不是很好的方法。

提前致谢 ：）

Answer 1

如果您将脚本动态附加到正文或正文中的任何内容，它将不会被执行（因为那里的所有内容在页面加载期间仅执行一次。您必须将其附加到 head.

您可以使用全局变量帮助它“找到它的组件”，反之亦然......