针对 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 执行此操作，如果我在第一个块中正确回答了您的问题，您可以使用状态来更改切换：

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

然后在第二个块中，您可以使用切换来显示或隐藏块：

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

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

希望这有帮助。