javascript - 反应和引导 v4 延迟崩溃以渲染组件

Question

我正在使用 React 和 bootstrap 4 来生成一个可折叠的 div。在这个 div 里面我有另一个 React 组件，像这样：

组分A

<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 但保持引导程序的折叠过渡。

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

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

标签： javascriptreactjsbootstrap-4