javascript - 定位 React js 中的下一个组件节点

Question

我目前正在 React 中构建一个可扩展的表格组件，并正在寻找一种定位下一个相邻组件的方法。请参阅示例:

<TableRow>
    <TableData>
        Purchase
    </TableData>
    <TableData>
        4 432,00
    </TableData>
</TableRow>

<TableRow>
    <TableData wrapper={true} colspan={2}>
        <SubTable>
            <SubRow>

                //CONTENT//

            </SubRow>
        </SubTable>
    </TableData>
</TableRow>

我本质上想在第一个 TableRow 组件之后立即在 TableRow 上进行显示/隐藏。有没有一种简单的方法可以做到这一点？

Answer 1

您可以使用 css 来做到这一点，如果我在第一个 block 中正确回答了您的问题，您可以使用状态来更改切换:

            <TableRow onClick={
                 //if hasChild ?
                 //boolean toggle code :
                 //pass empty function into the onClick to do nothing.
                 // ' '  }>
                <TableData>
                  Purchase
                </ TableData>
                <TableData>
                  4 432,00
                </ TableData>
            </ TableRow>

然后在第二个 block 中，您可以使用切换按钮来显示或隐藏该 block :

             <TableRow class={toggle ? 'show': 'hide'}>
               <TableData wrapper={true} colspan={2}>
                  <SubTable>
                    <SubRow>

                      //CONTENT//

                    </ SubRow>
                  </ SubTable>

                </ TableData>
              </ TableRow>

在你的 CSS 中，你必须为 .show 和 .hide 类编写一些代码。您可以使用CSS visibility .

希望这有帮助。