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状态并发送操作。当用户单击更改此prop的按钮时，您可以根据传递给组件的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
}

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

1 个答案: