在 React 组件中渲染脚本标签

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

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