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

Question

我正在使用React和materialize-css构建“添加项目”功能。由于某些原因，当我第一次进入它们所在的页面时，未初始化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中运行的代码。