html - 使用 ReactJS 映射物化 css <select> 的 <option>

Question

我在一个必须实现 <select><option> 的 React 组件中工作 功能。

我有这个:

<div className="input-field col s12">
      <select>      
        <option value="" disabled>Choose your option</option>

         {projects.map(function(projects, index) {                    
                  return (
      <option value={projects.name} key={projects.name}>
         {projects.name}
      </option>
            )})}           
     </select>
     <label>Project</label>
     </div>

我还在 componentDidMount() 中初始化了物化选择:

componentDidMount: function() {

    //initialize selects
    $(document).ready(function() {
      $('select').material_select();
    });
}, 
 (...)

但是组件显示的时候没有<options>出现.用检查工具在web源代码中调试生成的html时，有display none的选项，但改成block时，会在它后面创建一个新的select，没有样式。

有什么想法吗？非常感谢。

Answer 1

我发现了问题!!!

$(document).ready(function() {
          $('select').material_select();
        });

必须在显示选择时执行，而不仅仅是在安装组件时执行。所以我不需要在 componentDidMount() 阶段函数中执行 select 的初始化函数，而是在 render() 函数中，因为每次状态改变时(并且它改变因为它填充了 json 数据)，我必须执行上面的 jquery 函数。

解决了!希望对其他人有帮助。