如何在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> 
); 
}); 

现在的Collapse和ExpandonClick我必须显示/隐藏的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状态并分派一个操作。当用户单击更改此道具的按钮时，可以根据传入组件的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 
}