如何在React.js中单击按钮后隐藏列表下方的列表？

Question

我的容器代码如下。 我从另一个组件调用它。 我必须展开/折叠出现在另一个列表下的列表。

return this.props.labresult.map(test => {
  return (
    <div>
      <ul className='Result-list'>
        <li key={test.testId}>
          <div>
            <div className='Result-list__title'>
              <span> {test.testName}</span>
            </div>
            <div className='Flt-rt' >
              <IconButton tooltip="Collapse">
                <ContentRemoveCircle />
              </IconButton>
              <IconButton tooltip="Expand">
                <ContentAddCircle />
              </IconButton>
            </div>
          </div>
          <div className='Clearfix' />
          <div className='Border-all'>
            {
              test.labresultList.map(result => {
                return (
                  <li key={result.labresultId} >
                    <div>
                      <div>
                        <IconButton tooltip="Edit" key={result.labresultId} onClick={() => this.props.editLabResult(result)}>
                          <EditorModeEdit />
                        </IconButton>
                        <span> {result.loincCodeName} &nbsp;</span>          
                      </div>
                      <div>
                        <span> <b>status:</b> {result.status}</span>
                        <span>   {result.value}{result.uom} </span>
                      </div>
                    </div>
                    <div className='Clearfix' />
                  </li>
                )
              })
            }
          </div>
        </li>
      </ul >
    </div>
  );
});

现在， onClick的“ Collapse和“ Expand必须显示/隐藏 test.labresultList 。 我该如何实现？

Answer 1

首先，我建议将嵌套的div分解为自己的组件，因为嵌套越多，它就会变得越复杂。 我什至建议将<li>标记作为自己的组件并传递道具。

所以看起来更像这样：

return this.props.labresult.map((test) => {
    return (
        <div>
            <ul className='Result-list'>
                <Test key={test.testId} {...test} />
            </ul>
        </div>
    )
}

在“ Test组件中，您甚至可以拆分其他子组件。

<li>
    <div>
        <div className='Result-list__title'>
            <span> {this.props.testName}</span>
        </div>
        {/*----- all other stuff here ------------*/}
        <div className='Border-all'>
           {this._renderLabResults()}
        </div>
    </div>
</li>

好的，回到您的原始问题。 有几种方法可以做到这一点：

• 如果仅使用组件状态（即，使用this.state或this.setState ），请创建一个collapsed布尔状态，并在构造函数中将其默认设置为false 。 当用户单击更改此状态的按钮时，您可以基于该值过滤test.labresultList 。
• 如果您使用的是Redux之类的状态容器，则可以使用Redux状态并调度一个动作。 当用户单击更改此test.labresultList的按钮时，您可以根据传递到组件中的Redux状态中的值来过滤test.labresultList 。

对于简单的东西，如collapsed布尔属性，我建议仅使用组件状态。 它仅特定于单个组件，无需将此值保持在全局Redux状态。 除非您出于其他原因需要它。

在Test的构造函数中：

this.state = {
    collapsed: false,
}    

当用户单击切换折叠的布尔值的按钮时，请使用setState如下所示： this.setState({collapsed: !this.state.collapsed})

在_renderLabResults()使用条件渲染适当的子组件。

_renderLabResults() {
    if (!this.state.collapsed) {
                    // Not collapsed...render the test result here
    }
    return null     // Collapsed...render nothing
}