Question

如何使用React渲染递归列表？假设您有一个列表数据，如

{
    "list": [
        "Parent",
        "subList": [
            {
                "First Child",
                "subList": [
                    {
                        "Grand Child 1-1"
                    },
                    {
                        "Grand Child 1-2"
                    }
                ]
            },
            {
                "Second Child",
                "subList": [
                    {
                        "Grand Child 2-1",
                        "sublist": []
                    }
                ]
            }
        ]
    ]
}

如何编写递归映射函数来渲染缩进的子列表？以下是我的尝试，但我想以递归方式进行。

renderCheckboxRows = (list) => {
    list.map((filter, index) => {

        let content = <FilterRow key={index} {...filter} />;
        let subListContent = [];

        if (filter.subList && filter.subList.length > 0) {
            filter.subList.map((filter, index) => {
                subListContent.push(<FilterRow key={index} {...filter} />);
            });
        }
        return (content + subListContent);
    });

}

Answer 1

我通常是通过为此目的引入专用组件来实现的。

让我们将其命名为Node。其用法如下：

<Node caption={root.caption} children={root.children}/>

然后在Node.render内：

render()
{
    var children = [];

    children = this.props.children.map((c) =>
    {
        return <Node caption={c.caption} children={c.children}>
    });

    return (
        <div>
            <div>{this.props.caption}</div>
            {children}
        </div>
    );
}

这只是一个草稿示例，而不是divs，您将拥有自己的组件，但它说明了这个想法。

递归渲染组件

1 个答案: