Question

我正在尝试使用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();
}

Answer 1

将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 map函数中渲染Materialise可折叠对象

2 个答案: