问题描述
代码示例：https://codesandbox.io/s/jovial-paper-s0c69?file=/src/App.js
Material UI 平滑折叠。
但是，当我将 JSX 置于外部组件时，刹车平稳。 我做了平滑折叠和不平滑折叠的代码示例。
如何将列表保留在外部组件中并保持平滑折叠？
解决方法
但是，当我把 JSX 放到外部组件中时
您的示例实际上并未使用外部组件，您在 Lists 内部定义了 NestedList，因此该函数会在每次渲染时重新创建。
实际上可以通过一个单独的 Lists 组件来实现所需的行为，该组件从其父级接收所需的道具：
<Lists open={open} handleClick={handleClick} />