javascript - Materialise 'Select' 组件在 React 中无法工作

Question

正如问题中所述，我尝试在 MaterializeCSS/React 中使用 Select 组件，网页渲染如下所示:

文本显示为灰色，我无法单击它或与之交互。这是我的相关代码:

我已经包括:

import ReactDOM from 'react-dom';
import $ from 'jquery'; 

我的 componentDidMount() 方法如下所示:

componentDidMount() {
  var element = ReactDOM.findDOMNode(this.refs.dropdown)
  $(element).ready(function() {
    $('select').material_select();
  });
}

在我的 render() 函数中，我有 Materialize Website 中的示例代码:

<div class="input-field offset-s3 col s1">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

我在这里做错了什么？我遵循了这里给出的建议，但它似乎不起作用:

How do I get the Materialize select dropdown to work with React?

我四处搜寻，但似乎找不到其他人描述相同行为的帖子。

Answer 1

您不应该将 jQuery 与 React 一起使用。 React 使用虚拟 DOM 来制作 UI，而 jQuery 使用普通的浏览器 DOM。这意味着，如果您开始使用 jQuery 来处理状态，React 将不再处理状态、事件和 UI 渲染。 (https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk)。 MaterializeCSS 使用 jQuery 与其许多(如果不是全部)组件进行交互。

此外，在渲染函数中，React 对所有 DOM 属性和属性(包括事件处理程序)使用驼峰命名法。您需要使用 className 而不是 class 才能正确使用 css 类。