Javascript 将React.JS与Materialize v1.0.0一起使用时无法初始化JS

我们一直在尝试使用MaterializeCSS v1.0，使用npm将几个项目转换为react.js，并且花了很多时间。我想知道是否有其他人也尝试过解决这个问题，也许能想出一些解决办法

使用npm模块并在Index.js中引用它，我可以很好地使用css部分

我遇到的问题是用单个组件初始化缩小的js，但没有成功。下面是一个示例，它是用于css入口点的Index.js和侧栏组件，我正在尝试使用缩小的js。我还提供了App.js配置，以防有人好奇。计划是将该项目的每个部分分解为单独的组件，但首先只想在初始化侧栏js之前获得初始化功能

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
导入“materializecss/dist/css/materialize.min.css”；
从“./components/App”导入应用程序；
ReactDOM.render(
















{/*--Showcase*/}
你找到了。。。
正确的起点

通过我们的服务将您的业务提升到一个新的水平
把公司带到财富500强

);
}
}
导出默认着陆；

下面是一些我在控制台中看到的关于锚定标签的错误的屏幕截图（不确定如果侧栏中需要的话，我该如何处理）。我正在按照下面显示的console.log访问侧栏

​希望其他人已经遇到了这个问题，可以帮助

干杯

---

[！[enter image description here][3][3]

触发器按钮标记不正确。它必须是

数据目标

，并且必须具有类

sidenav触发器

。此外，侧导航必须具有类名

sidenav

<代码>侧导航带连字符将不起作用：

<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
    <i className="material-icons">menu</i>
</a>

此外，在使用react时，应该始终使用refs，而不是自己查询DOM。将ref回调应用于sidenav元素，然后使用它初始化：

class Landing extends Component {
    onRef = nav => {
        this.nav = nav;
        M.Sidenav.init(nav);
    };

    render() {
        return (
           {/* ... */}

            <ul ref={this.onRef} id="side-nav" className="sidenav">
                <li><a className="divider" /></li>

                {/* ... */}
            </ul>

            {/* ... */}
        );
    }
}

类着陆扩展组件{
onRef=nav=>{
this.nav=nav；
M.Sidenav.init（导航）；
};
render（）{
返回(
{/* ... */}

到底发生了什么您不想发生的事情？控制台中关于锚的消息是来自eslint的警告。这是因为您至少有一个锚没有任何内容（在Landing.js中，查看className=divider的锚）谢谢你的反馈和回答。你能更新你的代码沙盒来显示你的工作答案吗？看看这个例子，看起来你可能忘记了什么，因为它仍然没有显示固定的标记。onRef是否可能进入构造函数或它自己的方法？@Blahblah fixed。side nav的类名必须是
sidenav
 而不是
side-nav
。你真的必须坚持文档。确保你在文档中选择了正确的版本。
side-nav
是版本
0.100.xx
中的正确类。感谢@trixn标记为正确！感谢你使用refs指出，以及将文档标记与v1匹配。0@Blahblah就是因为link元素没有
href
属性集。我更新了codesandbox和我的答案。只有设置了该属性集的链接才会应用
光标：指针
样式。
<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
    <i className="material-icons">menu</i>
</a>

class Landing extends Component {
    onRef = nav => {
        this.nav = nav;
        M.Sidenav.init(nav);
    };

    render() {
        return (
           {/* ... */}

            <ul ref={this.onRef} id="side-nav" className="sidenav">
                <li><a className="divider" /></li>

                {/* ... */}
            </ul>

            {/* ... */}
        );
    }
}