Materialize CSS（选项卡、可折叠、按钮）无法正常工作：React.js（渲染）

Question

我正在尝试创建多个可折叠项，在每个可折叠项中都有一个选项卡，该选项卡有 3 列（简单、中等、困难）。

我的状态中有可折叠数据，我正在尝试遍历我的状态并呈现其中存在选项卡的可折叠数据。

我的状态是-

{ 
  collapsibles: [
      {tabs_data: {'href': 'something1', 'name': 'something1'}},
      {tabs_data: {'href': 'something2', 'name': 'something2'}},
      ...
   ]
}

我正在尝试将其渲染为..

   <ul className="collapsible">
            {this.state.collapsibles.length > 0 ? (this.state.collapsibles.map(((data_dict, key) => (
                <CategoryCollapsible key={key} category={data_dict} />
            )))) : null}
   </ul>

CategoryCollapsible 是一个简单的 <li> 可折叠元素。

import React, { Component } from 'react'
export default class CategoryCollapsible extends Component {
render() {
    return (
        <li id={this.props.category.name}>
            <div className="collapsible-header">{this.props.category.name}</div>
            <div className="collapsible-body">
                <div className="row">
                    <div className="col s12">
                        <ul className="tabs">
                            <li className="tab col s3"><a href={"#easy" + this.props.category.name} >Easy</a></li>
                            <li className="tab col s3"><a href={"#medium" + this.props.category.name} >Medium</a></li>
                            <li className="tab col s3"><a href={"#hard" + this.props.category.name} >Hard</a></li>
                        </ul>
                    </div>
                    <br />
                    <div id={"easy" + this.props.category.name} className="col s12">1</div>
                    <div id={"medium" + this.props.category.name} className="col s12">2</div>
                    <div id={"hard" + this.props.category.name}  className="col s12">3</div>
                </div>
            </div>
        </li>
    )
}
}

问题是 1、2、3 应该是隐藏的，但它们就像图片中那样出现了。有趣的是，当我不在循环中渲染它时，它工作得很好。怎么回事？

Answer 1

您是否可能忘记在组件更新时调用以下内容？

var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);

Materialize CSS（选项卡、可折叠、按钮）无法正常工作：React.js（渲染）

MateralizeCSS (tabs, collapsibles, buttons) not working correctly: React.js (render)

css

components

render

materialize

reactjs