Question

我试图在ReactJs中做手风琴之类的事情。现在我有3个组件：<TableList>，<TableListGroupRow>，<TableListRow>

在List渲染方法中，我将GroupRows和Rows推送到一个数组，然后渲染。

        //one group row for example
        var group;
        tableRows.push(
            group = 
            <TableListGroupRow
            onClick={this.toggleOpenGrp }  />
        );

        //one row for example
        var row;
        tableRows.push(
            row = 
            <TableListRow
            onClick={this.rowClick2 } />
        );

        group.children.push(row);



    return (
                <tbody>
                    {tableRows}
                </tbody>
    );

我试图将行链接存储到他们所属的groupRow.children中。根据这个想法，我可以听一下groupRow的点击，并将状态设置为隐藏在其子项中的所有行。属性。

但是我了解到<TableListGroupRow>并没有返回带有children数组的实例对象。也许这是完全错误的概念。请让我知道这样的事情是如何反应的。
谢谢！

Answer 1

你绝对不需要“存储链接”......

此外，您可以将组件推送到没有赋值的数组（因为赋值将返回undefined）。

我认为更好的方法可能是将'display'布尔值存储为父级状态的一部分，并根据this.state.display有条件地加载子组件所以在你的例子中，这将是： `

return (
        <tbody>
            {this.state.display ? tableRows : null}
        </tbody>
);

` （事件处理程序显然需要绑定某些事件。

示例：

toggleDisplay() {
    this.setState({
        display: !this.state.display
    });
 }

`并通过道具

将此事件处理程序传递给子项

最后，我不知道它是否有帮助，但你可以通过传递事件处理程序（甚至通过多个级别）来减少尝试从父级别设置子级外观的一级方法。

希望这有帮助！

不能将React组件推送到另一个React组件中的数组

1 个答案: