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上的show / hide。有一个简单的方法可以做到这一点吗？

Answer 1

你可以用css做到这一点，如果我在第一个块中正确地得到你的问题，你可以使用state来改变切换：

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

希望这有帮助。

在React js中定位下一个组件节点

1 个答案: