实现css和React js：Sidenav中的下拉列表不起作用

Question

我想使用React JS和Materialize来制作响应式网站。因此我创建了一个带物化的Sidenav。不幸的是Dropdown不起作用。下拉列表按原样呈现，相应的项目显示在其下方，无需按任何内容。如果我点击下拉按钮，则没有任何反应......

如果有人能帮助我，我会非常满意。我认为我是React JS和Materialise的初学者，所以请不要对我太苛刻。 ;）

我的Sidenav的React类：

var SideNav = React.createClass（{

renderVoltageMenu: function () {
    return (
        <div>
            <li><div className="divider"></div></li>
            <li><a href="#!">Bereiche</a></li>


            <li><a className="dropdown" href="#!" data-activates="dropdown1">Dropdown<i className="material-icons right">arrow_drop_down</i></a></li>
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
            </ul>


        </div>
    )
},

renderPowerMenu: function(){
    return (
        <div>
            <li><div className="divider"></div></li>
            <li><a href="#!">Bereiche</a></li>
            <li><a href="#!">Clickbox mean</a></li>
            <li><a href="#!">clickbox actual</a></li>
            <li><a href="#!">clickbox Pges, P1, P2, P3</a></li>
        </div>
    )
},

renderCemsMenu: function(){
    return (
        <div>
            <li><div className="divider"></div></li>
            <li><a href="#!">Search...</a></li>
            <li><a href="#!">Dropdown: Sortby ...</a></li>
        </div>
    )
},

renderGridoperatorContent: function(){
    return (
        <GridoperatorContent/>
    )
},

renderVoltageContent: function(){
    return (
        <VoltageContent/>
    )
},

renderPowerContent: function(){
    return (
        <PowerContent/>
    )
},

renderCemsContent: function(){
    return (
        <CemsContent/>
    )
},

getInitialState: function(){
    return({
        menu_name: 'gridoperator', //'gridoperator', 'voltage', 'power', 'cems'
    });
},

setMenuNameGridoperator: function(){
    this.setState({
        menu_name: 'gridoperator'
    });
},

setMenuNameVoltage: function(){
    this.setState({
        menu_name: 'voltage'
    });
},

setMenuNamePower: function(){
    this.setState({
        menu_name: 'power'
    });
},

setMenuNameCems: function(){
    this.setState({
        menu_name: 'cems'
    });
},

componentDidMount() {
    console.log("SideNav mounted");
    $(".dropdown").dropdown();
    $('.button-collapse').sideNav();
    // $('.button-collapse').sideNav({
    //         menuWidth: 300, // Default is 300
    //         closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
    //     }
    // );
    $('.collapsible').collapsible();
    $('.button-collapse').sideNav('show');
},

render() {
    return (
        <div>
            <ul id="slide-out" className="side-nav fixed">
                <div>
                    <li><a href="#!" onClick={() => {this.setMenuNameGridoperator()}}>Gridoperator</a></li>
                    <li><a href="#!" onClick={() => {this.setMenuNameVoltage()}}>Spannung</a></li>
                    <li><a href="#!" onClick={() => {this.setMenuNamePower()}}>Leistung</a></li>
                    <li><a href="#!" onClick={() => {this.setMenuNameCems()}}>CEMS</a></li>
                </div>

                {(() => {
                    //Menu appearance depending on menu chosen
                    switch (this.state.menu_name) {
                        case "gridoperator":    return ;
                        case "voltage":         return this.renderVoltageMenu();
                        case "power":           return this.renderPowerMenu();
                        case "cems":            return this.renderCemsMenu();
                        default:                return ;
                    }
                })()}
            </ul>

            {(() => {
                //Content depending on menu chosen
                switch (this.state.menu_name) {
                    case "gridoperator":    return this.renderGridoperatorContent();
                    case "voltage":         return this.renderVoltageContent();
                    case "power":           return this.renderPowerContent();
                    case "cems":            return this.renderCemsContent();
                    default:                return this.renderGridoperatorContent();
                }
            })()}

        </div>
    )
}

}）;