创建组件后，reactJS 材料 ui 中的平滑崩溃损坏

Posted 2023-03-24

【中文标题】创建组件后，reactJS 材料 ui 中的平滑崩溃损坏

【英文标题】：Broken smooth collapse in reactJS material ui after creating Component

【发布时间】：2021-05-10 12:14:16

【问题描述】：

代码示例：https://codesandbox.io/s/jovial-paper-s0c69?file=/src/App.js

Material UI 实现平滑折叠。

但是，当我把 JSX 放到外部组件上时，刹车很顺畅。 我制作了平滑折叠和没有平滑折叠的代码示例。

如何将列表保留在外部组件中并保持平滑折叠？

【参考方案1】：

但是，当我把 JSX 放到外部组件中时

您的示例实际上并未使用外部组件，您在 NestedList 内部定义了 Lists，因此在每次渲染时都会重新创建该函数。

可以通过实际拥有一个单独的Lists 组件来实现所需的行为，该组件从其父组件接收所需的道具：

<Lists open=open handleClick=handleClick />

【讨论】：

感谢重播，我尝试用道具将我的列表组件替换为您的示例，但没有任何变化。过渡使得不顺畅。请问，你能给出一个完整的解决方案吗？

你把Lists移到NestedList之外了吗？