如何判断React-Bootstrap组件是否已完成呈现？

f0ofjuux 于 2023-01-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(196)

我有一个React Bootstrap accordion ，其中包含大量数据，需要几秒钟才能加载，如果您尝试在此之前展开它，则无法正常工作。我希望隐藏/覆盖 accordion ，直到渲染完成。
需要说明的是：这不是一个在服务器上等待数据加载的问题--客户端上所有数据都可用，只是有很多要渲染。我在React文档中找不到任何关于如何处理这种情况的内容。
我尝试使用Accordion onLoad事件在组件状态中设置一个加载标志。但是，Bootstrap似乎从来没有真正触发过它，而且我也找不到任何其他可以正常工作的事件。
更新：顺便说一句，我正在使用功能组件。

twitter-bootstrap

来源：https://stackoverflow.com/questions/75024718/how-can-i-tell-if-an-react-bootstrap-component-has-finished-rendering

1条答案

按热度按时间

jaql4c8m1#

好的，我明白了，在一个空数组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' : ''}>
...

赞(0）回复(0）举报 2023-01-06

我来回答

如何判断React-Bootstrap组件是否已完成呈现？

1条答案

相关问题

热门标签

最新问答