React.js-创建简单手风琴示例

Question

我是React的新手，在解决这个逻辑上遇到了麻烦：

本质上，我正在使用flexbox创建一个表，并且我也想要它，以便当您单击其中的一行时，它会展开并显示另一行（例如，它将给出一个简短的描述）。

到目前为止，我所拥有的只是桌子。

class Application extends React.Component {
  render() {
    const renderDataRows = (
      [
                <div key={0} className='row'>
                    <div className='cell description'> Mortage Bill
                    </div>
                    <div className='cell amount'>$0,000,000</div>
                    <div className='cell amount'>$2.50</div>
                    <div className='cell amount'v>000%</div>
                </div>,
                <div key={1} className='row'>
                    <div className='cell description'> Electric Bill
                    </div>
                    <div className='cell amount'>$0,000,000</div>
                    <div className='cell amount'>$2.50</div>
                    <div className='cell amount'v>000%</div>
                </div>,
      ]
        )


    const containerTable = (
            <div className='table-container'>
                {renderDataRows}
            </div>
        )
    return (
      <div>
        {containerTable}
      </div>
    )
  }
}

更具体地说，构造隐藏行的最佳方法是什么？ 创建为单元或同级的子级？

我假设我将需要状态来跟踪当前打开的是什么，等等？

我已经附加了Codepen链接以解决问题

Answer 1

这可以通过以下方式完成：

让所有cells都在单个父div中，并让单元格描述为另一个同级div（尽管使用会更好）。 在同级div上放置一个类，例如hidden 。 不要在cells div上添加点击处理程序。 每当单击该div时，就使用该div的ID /键更新状态。 现在使用它来将hidden类设置为其他div。 将this.state.key与当前的id / key进行比较，并相应地显示或隐藏。 我没有给出具体的代码。

注意：无需将div存储在renderDataRows中，只需将数据放入其中并在其上映射以创建所有div。 这样，您可以轻松地在单个位置处理hidden类和任何其他变体，而不必为每行数据单独更新它。