React - 内容变得可见后重新渲染答案

【问题标题】：React - rerender after content becomes visibleReact - 内容变得可见后重新渲染
【发布时间】：2021-10-07 10:15:27
【问题描述】：

我在 Accordion（<details> 元素）中有一个 React（钩子）组件。

组件对offsetWidth 进行了一些假设，因为某些子元素可用，但是当折叠式关闭时，组件不可见，并且这些 Ref 的 offsetWidth 为 0。

在手风琴打开并且组件本身变得可见之后，我需要重新渲染组件。

我正在尝试将手风琴的状态（打开/关闭）传递给组件以在此更改时触发渲染，但 useEffect 在浏览器绘制组件之前运行，因此即使手风琴状态为，宽度仍为 0打开。

知道如何解决这个问题吗？

【问题讨论】：

【解决方案1】：

实际上useEffect 在组件重新渲染后被调用。所以这可能不是你的问题。

我建议使用状态来动态添加带有display: none 的类并删除它。而不是将其宽度更改为零

【讨论】：

宽度为 0，因为手风琴的“主体”（以及组件）未显示。这是一个原生
元素，不知道它在内部是如何工作的。
你是对的...来自 React 文档 reactjs.org/docs/hooks-effect.html#example-using-hooks _ React 保证 DOM 在运行效果时已经更新。_
很高兴我能帮上忙