在 React 映射函数中渲染 Materialize 可折叠对象答案

【问题标题】：Rendering Materialize collapsibles within the React map function在 React 映射函数中渲染 Materialize 可折叠对象
【发布时间】：2018-08-27 14:55:28
【问题描述】：

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

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

我尝试将

如何让我的折叠式展开？

谢谢！

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

【问题讨论】：

g_stu，如果你能使用下面的库，请告诉我。如果您有任何疑问，请告诉我。

标签： javascript reactjs materialize

【解决方案1】：

Materialize CSS 可能无法直接与 React 一起使用。您是否尝试过 React-Materialize 框架。它是一个使用与 React 集成的 materialize CSS 的流行库，并且它们的组件示例中包含 Collapsible 元素：

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

【讨论】：

【解决方案2】：

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

然后

import M from "materialize-css";

componentDidMount() {
  M.AutoInit();
}

或者

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

【讨论】：

感谢您发布此答案。虽然这段代码可能会回答这个问题，但请您 edit 您的帖子添加关于它为什么/如何工作的解释？这可以帮助未来的读者学习和应用您的答案。当您包含解释时，您也更有可能获得积极的反馈（赞成）。