Question

我有一个React应用，并尝试通过jQuery初始化物化js。

index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script type="text/javascript" src="/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/materialize.min.js"></script>

    <script>
      $(document).ready(function() {
        $(".tabs").tabs();
      });
    </script>
  </body>

问题：因此react渲染了其中包含具体化“标签”的“ UserProfile”组件。如果我转到UserProfile路由，则javaScript可以工作，但是如果我转到另一个页面并返回至UserProfile，则javaScript不起作用。或者，如果我从另一个页面开始并转到UserProfile，结果相同，则选项卡不起作用。

我检查了html“元素”，并且其中有那些脚本，它们并没有消失（它们应该确实存在，但以防万一）。

PS 我是React的新手，所以也许这段代码从根本上是错误的，而且我知道在主html下方添加这样的脚本不是一个好主意，但是即使如此，我认为它也应该在最小。还是我需要某种方式将脚本添加到组件中？任何帮助都会有所帮助。

Answer 1

JQuery与React无关，$(document).ready将确保在html文档完全加载后执行回调，但是不能保证它将等待react.render完成执行，这意味着您的回调在React将组件添加到DOM之前运行，并且没有找到任何.tabs。

也许您想使用componentDidMount()做任何事情？反应文档：https://reactjs.org/docs/react-component.html#componentdidmount

Answer 2

我无法像现在正在打电话那样输入完整的示例。但是，如果您不想使用react-materialize，就是这样。

创建一个Tab组件。为此：

import M from "<path to materialize js or from materialize npm package if installed>"

在内部，componentDidMount使用纯JS而不是M.Tabs.init(this.Tab)的jQuery来初始化选项卡

然后在render方法中，将ref属性添加到ul元素，例如ref={Tab => this.Tab = Tab }。

导出组件并像<Tab />一样使用

希望这会有所帮助。

如果出于任何其他原因使用jQuery（在完成npm i jquery --save并导入之后），则不要准备好文档，因为在响应中，componentDidMount足以处理init呈现页面后调用的jQuery代码。

Answer 3

所以我花了几个小时。

我需要的一切。要在UserComponent中添加这个componentDidMount（）（我知道每个人都说过这一点，但是以前没有人说过window，也许实际上是显而易见的，但对我而言不是）

componentDidMount() {
  window.$(".tabs").tabs(); 

/* Or initilize with Materialize */
// var elems = document.querySelectorAll(".tabs");
// window.M.Tabs.init(elems, {});
}

如果没有window，您将得到第一个错误$ undefined，然后，如果将jQuery添加到模块中，则会得到“ tabs（）不是函数`。”

这样可以很好地工作，并且您不必导入任何东西。

为什么JavaScrips仅在加载页面后才能工作？

3 个答案: