javascript - React.js - 创建简单的 Accordion 示例

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>
    )
  }
}

更具体地说，构造隐藏行的最佳方式是什么？创建为细胞的 child ，还是 sibling ？

我假设我需要状态来跟踪当前打开的内容等？

我附上了 Codepen乱七八糟的链接

Answer 1

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

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

注意:不是将 div 存储在 renderDataRows 中，而是将数据放入其中并映射到它上面以创建所有 div。这样您就可以轻松地在一个地方操作隐藏类和任何其他变体，而无需为每行数据单独更新它。