如何在 React js 中添加内联脚本？答案

【问题标题】：How to add inline script in react js?如何在 React js 中添加内联脚本？
【发布时间】：2021-02-20 12:30:22
【问题描述】：

我正在转换我的 HTML 网站以做出反应，在 body 标签下，我有这个脚本可以切换我的移动导航

    <script>
  window.addEventListener("scroll", function () {
    var nav = document.querySelector("nav");
    nav.classList.toggle("sticky", window.scrollY > 0);
  }, { capture: true });

  $(document).ready(function () {
    $('.fa-bars').click(function () {
      $('nav ul').toggleClass('active-2');
    })
  });
</script>

然后，一旦我转到另一个页面，导航按钮就会停止工作（即在我刷新页面之前它不会切换导航）

请问我该如何解决？

【问题讨论】：

标签： javascript reactjs react-router react-web

【解决方案1】：

或许可以放在componentDidMount方法中：

componentDidMount() {
    const script = document.createElement("script");
    script.src = "your-script-path";

    document.body.appendChild(script);
}

来自反应文档：

componentDidMount() 在组件安装（插入到树中）后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

https://reactjs.org/docs/react-component.html#componentdidmount

【讨论】：