在 React 地图函数中渲染 Materialize 可折叠对象

Question

我正在尝试使用 map 函数渲染 React 元素，我希望我的每个元素都有一个可折叠的组件（同时使用 Materialize CSS 框架）。但是，我无法让我的可折叠组件工作，即只有 header 是可见的并且它们不会对点击做出反应。

我预感这与事件侦听器有关，但一直未能找到解决我的问题的方法。

我已尝试将

如何让我的可折叠物品展开？

谢谢！

Parent.js

Results =  
    this.state.results.result.map(function(item, index) {
      return (
        <div key={index}> 
          <Result 
            title={item.title} 
            link={item.link} 
            snippet={item.snippet} 
            id={sessionid}
          /> 
        </div>
      )}       
    )

Result.js

<ul className='collapsible'> 
      <div className="collapsible-header"> 
          Hello
      </div>
      <div className="collapsible-body">
        <span>
          Lorem ipsum dolor sit amet.
        </span>
      </div> 
</ul>

在 Result.js 元素内：

componentDidMount() {
     $('.collapsible').collapsible();
}

Answer 1

Materialize CSS 可能无法像那样直接与 React 一起工作。您是否尝试过 React-Materialize 框架。它是一个流行的库，使用与 React 集成的物化 CSS，并且在他们的组件示例中有 Collapsible 元素：

https://react-materialize.github.io/#/collapsible

Answer 2

首先安装包：
npm install materialize-css@next

然后

import M from "materialize-css";

componentDidMount() {
  M.AutoInit();
}

或者

useEffect(() => {
 M.AutoInit();
}, []);

在 React 地图函数中渲染 Materialize 可折叠对象

Rendering Materialize collapsibles within the React map function

javascript

materialize

reactjs