Question

我的代码中有2个collapsible标签彼此相邻：

<Collapsible trigger="text 1 " >
  //some html content here
</Collapsible> 
<Collapsible trigger="text 2 " >
  //some other html content here
</Collapsible>

Click here to see image of problem 但是，当我关闭与“文本1”关联的可折叠对象时，在“文本1”和下一个可折叠元素之间仍然存在空白。理想情况下，我需要滑动效果，以便当我关闭第一个可折叠对象时，第二个对象的内容自动向上移动，然后在打开第一个可折叠对象时向下移动。

Answer 1

尝试从以下位置更改

//some html content here

成为类似

{this.state.isExpanded && (/* some html content here */)

如果您的isExpanded状态为false，则this.props.children将不会呈现（因此不再有保留空间）

查看此example code

编辑：对我以前的回答表示抱歉，要渲染任何内容，您都需要返回null

React-2个可折叠标签之间的空白

1 个答案: