javascript - 在 React Component 中渲染脚本标签

Question

我正在制作一个 React 应用程序，我只需要在一个组件中运行 Javascript 脚本，引用其中一个 div。

我知道有一些库可以这样做，但我想知道是否有更直接的方法来做到这一点。现在我这样做:

import React, { Component } from "react";
import "../ThisComponent.css";

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <div id="scriptTarget" />
        <div className="main">
          // Other stuff
        </div>
        <script src="js/myScript.js" />
      </div>
    );
  }
}

但是没有任何反应。脚本存储在public/js/myScript.js。
谢谢!

Answer 1

我最终通过在渲染组件之前添加 componentDidMount 函数解决了这个问题。像这样:

import React, { Component } from "react";
import "../ThisComponent.css";

export default class MyComponent extends Component {
  componentDidMount() {
    const script = document.createElement("script");

    script.src = "js/myScript.js";
    script.async = true;

    document.body.appendChild(script);
  }

  render() {
    return (
      <div>
        <div id="scriptTarget" />
        <div className="main">
          // Other stuff
        </div>
      </div>
    );
  }
}

如果有人有更好的解决方案，请随时分享。我会了解进一步的建议。