我如何判断 React-Bootstrap 组件是否已完成渲染？

Question

我有一个 React Bootstrap 手风琴，里面有很多数据，需要几秒钟才能加载，如果您在此之前尝试扩展它，它就无法正常工作。 我想隐藏/覆盖手风琴直到渲染完成。

需要明确的是：这不是在服务器上等待数据加载的问题——它在客户端上都是可用的，只是有很多东西要渲染。 我在 React 文档中找不到任何关于如何处理这种情况的信息。

我尝试使用 Accordion onLoad 事件在组件 state 中设置加载标志。但是，Bootstrap 似乎从未真正触发它，而且我找不到任何其他我希望工作的事件。

更新：顺便说一句，我正在使用功能组件。

Answer 1

好的，我想通了，在组件的空数组 useEffect 中设置加载标志，它会在渲染完成时触发。 非常简单的解决方案，只是功能组件不是那么直观。

const [accordionRendering, setAccordionRendering] = React.useState(true);
...
    
React.useEffect(() => setAccordionRendering(false), [])
...

return <React.Fragment>
    <Spinner animation="border" className={accordionRendering ? '' : 'd-none'}/>
    <Accordion activeKey={activeKey} onSelect={onAccordionChanged} className={accordionRendering ? 'invisible' : ''}>
...