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 / key更新状态。现在使用此选项将 hidden 类设置为其他div。将 this.state.key 与当前ID /键进行比较，然后相应地显示或隐藏。我没有给出具体的代码。

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

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

1 个答案: