我坚持初始化某些需要Javascript的ui组件，例如side-nav和carousel，
我尝试使用React expandToSubKey生命周期方法，并在实现文档的过程中使用Javascript
componentDIdMount()
但是我收到一条Eslint错误，说import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import M from 'materialize-css/dist/js/materialize.min.js';
import 'materialize-css/dist/css/materialize.min.css';
class Navbar extends Component {
componentDidMount() {
document.addEventListener('DOMContentLoaded', () => {
const elems = document.querySelectorAll('.side-nav');
const instances = M.Sidenav.init(elems);
});
}
render() {
return (
<React.Fragment>
<div className="navbar-fixed">
<nav className="teal">
<div className="container">
<div className="nav-wrapper">
<a href="#home" className="brand-logo white-text">Travellizers</a>
<a href="#!" data-target="mobile-nav" className="button-collapse hide-on-md-and-up">
<MenuIcon />
</a>
<ul className="right hide-on-med-and-down">
<li><a href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#popular">Popular places</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</div>
</nav>
<ul className="side-nav" id="mobile-nav">
<li><a href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#popular">Popular places</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</React.Fragment>
);
}
}
export default Navbar;被分配了一个值，但从未使用过。仍然无法正常使用导航功能。我真的不知道我在想什么。
这是我的instances文件
eslintrc.js
这是来自实现文档的link，解释了如何使用Java脚本来初始化side-nav，所以我只是想让它在这里工作。 首先十分感谢。
致谢。
答案 0 :(得分：1)
您需要执行List<String> mylist = new ArrayList<>();
mylist.add("remove");
mylist.add("all");
mylist.add("remove");
mylist.add("remove");
mylist.add("good");
mylist.add("remove");
int nthIdexNumber = 4;
mylist = mylist.subList(0,nthIdexNumber);
。之后，您需要在您的组件JS文件中导入materialize-css。
要使用Javascript materialize-css组件，必须在npm install materialize-css@next中对这些组件进行引用，然后才能在componentDidMount()中使用。
您可以从此存储库-GermaVinsmoke - Reactize
中查看React中的其他Materialise CSS组件ref