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

MateralizeCSS（选项卡，可折叠控件，按钮）无法正常工作：React.js（渲染）

1 个答案: