Question

我正在使用React和bootstrap 4来生成可折叠的div。在这个div中，我还有另一个React组件，如下所示：

ComponentA

<a name={name}
    className={'btn btn-primary'}
    data-toggle={'collapse'}
    href={'#collapseId'}
    role={'button'} aria-expanded={'false'}
    aria-controls={'collapseId'}>
    collapse
</a>
<div id='collapseId'>
    <ComponentB/>
</div>

这正常工作，但是当我多次渲染ComponentA（我需要渲染20次以上）时，我遇到了性能问题，因为ComponentB包含许多div和按钮。

所以我想做的是有条件地渲染ComponentB，但保持bootstrap的折叠过渡。

现在，如果我想有条件地渲染，我可以这样做：

constructor(props){
    super(props);

    this.state={collapsed=true}
}

conditionalRender(e){
    this.setState(prevState => this.state.collapsed = !prevState.collapsed)
}

然后在渲染功能中：

<a name={name}
    className={'btn btn-primary'}
    data-toggle={'collapse'}
    href={'#collapseId'}
    role={'button'} aria-expanded={'false'}
    aria-controls={'collapseId'}
    onClick={(e)=>this.conditionalRender(e)}>
    collapse
</a>
<div id='collapseId'>
    {!this.state.collapsed &&
    <ComponentB/>
    }
</div>

它确实有效，但是过渡很漫长，不流畅并且看起来也不好。

是否有办法延迟塌陷过渡的过渡，以使其正常工作并保持流畅？我已经看到了对CSS过渡的一些替代，但是同样，它也不是很流畅。另一个有效的选择是使用setState的回调函数来执行默认锚点的功能，但我不知道该怎么做。

bootstrap 4.1
react 16.4.2

反应并引导v4延迟崩溃以渲染组件

0 个答案: