物化 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);