反应物化sidenav触发器消失

Question

我正在使用React和materializecss创建一个应用程序。我正在尝试将sidenav集成到我的导航栏中。我有所需的标记和外观，但每当我添加＆＃39; sidenav-trigger＆＃39;类到我的菜单按钮，元素本身就消失了。我不知道它为什么会这样。我试过没有ComponentDidMount函数测试，但问题仍然存在。我也尝试通过index.html手动导入materialize js而没有任何运气。

这是我的组件

import React, { Component } from 'react';
import './Header.css';
import M from 'materialize-css';

class Header extends Component {

  componentDidMount(){
    M.Sidenav.init(this.sidenav);
  }

  render() {
    return (
      <div className="header">

        <div className="navbar-fixed">
          <nav className="blue">
            <div className="container">
              <div className="nav-wrapper">


                <div className="row">
                  <div className="col s1">
                    <a href="#" className="sidenav-trigger" data-target= 
                    {"#" + "mobile-nav"}>
                      <i className="material-icons">menu</i>
                    </a>
                  </div>
                  <div className="col s3">
                    <a href="#" className="brand-logo"><span 
                    className="the">Super</span> Cool Brand</a>
                  </div>
                </div>


              </div>
            </div>
          </nav>
        </div>

        <ul className="sidenav" id="mobile-nav" ref={(sidenav) => 
        {this.sidenav = sidenav}}>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </div>
    );
  }
}

export default Header;