React App-materialize-css在第一次渲染时未初始化

Question

我正在使用React和materialize-css构建'Add Item'功能。由于某些原因，当我第一次进入它们所在的页面时，未初始化materialize-css组件。我刷新页面后，它们确实会初始化。我花了几个小时试图找出问题所在，但找不到我做错了什么。我通过npm安装了materialize-css，这是初始化我的materialize-css组件的代码：

    componentDidMount() {
    var context = this;
    document.addEventListener('DOMContentLoaded', function() {

        var elemsTwo = document.querySelectorAll('select');
        var instancesTwo = M.FormSelect.init(elemsTwo, {});

        var elemsThree = document.querySelectorAll('.timepicker');
        var instancesThree = M.Timepicker.init(elemsThree, {});
      });
}

[就像我说过的那样，刷新页面后它可以正常工作，但是当浏览页面时，它不起作用。以下是刷新之前和之后页面外观的屏幕截图（请参阅屏幕截图中的“性别”和“口语”字段）。预先感谢。

Answer 1

单独使用DOMContentLoaded时使用React的做法不好。您的主要问题是，在您的内容准备就绪时会触发DOMContentLoaded，但这并不意味着React已经完成了初始化。另外，使用React在页面之间导航时，不会触发DOMContentLoaded。

您可以使用已经缩小此差距的库，例如https://material-ui.com/。

---

如果您想保留自己的概念，那么当导航器更改页面时，还必须调用在componentDidMount中运行的代码。