我如何在 React 中使用 Materialize css 中的 DropDown

Question

如何在 React 组件中使用 Materialize css 中的 DropDown？当我点击按钮时，没有下拉内容我的代码如下：

import React , {Component} from 'react';
import 'materialize-css';

export default class extends Component{
      openDropDown(){
          $('.dropdown-button').dropdown({
                  inDuration: 300,
                  outDuration: 225,
                  constrainWidth: false, // Does not change width of dropdown to that of the activator
                  hover: true, // Activate on hover
                  gutter: 0, // Spacing from edge
                  belowOrigin: false, // Displays dropdown below the button
                  alignment: 'left', // Displays dropdown with edge aligned to the left of button
                  stopPropagation: false // Stops event propagation
              }
          );
      }
      render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1' onClick={()=> this.openDropDown} >Drop Me!</a>
                <ul classID='dropdown1' className='dropdown-content'>
                    <li><a href="#!">one</a></li>
                    <li><a href="#!">two</a></li>
                    <li className="divider"></li>
                    <li><a href="#!">three</a></li>
                    <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                    <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }
}

Answer 1

您不必将 JQuery 与 React 和 MaterializeCSS 结合使用来初始化组件。

您需要做的是正确导入M并初始化里面的下拉菜单componentDidMount()。有两种方法可以做到这一点;

您可以简单地使用 AutoInit()。

M.AutoInit();

或者，由于您还传递了初始化选项，因此您需要使用：

let elems = document.querySelectorAll('.dropdown-trigger');
M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});

我的 IDE 似乎找到了Downdown上不存在的IDE M，但是，代码在浏览器中运行良好。

上面的一个例子：

import M from 'materialize-css';  

class Foo extends Component {

    componentDidMount() {
        let elems = document.querySelectorAll('.dropdown-trigger');
        M.Dropdown.init(elems, {inDuration: 300, outDuration: 225});
    }

    render(){
        return(
            <div className="input-field col s12">
                <a className='dropdown-button btn' data-activates='dropdown1'>Drop Me!</a>
                <ul id='dropdown1' className='dropdown-content'>
                  <li><a href="#!">one</a></li>
                  <li><a href="#!">two</a></li>
                  <li className="divider"></li>
                  <li><a href="#!">three</a></li>
                  <li><a href="#!"><i className="material-icons">view_module</i>four</a></li>
                 <li><a href="#!"><i className="material-icons">cloud</i>five</a></li>
                </ul>
            </div>
        )
    }

}
export default Foo;

查看Materialize Dropdowns以查看他们关于没有 JQuery 的初始化的文档。