IT技术 - 递归渲染组件 - 吾爱随笔录

你如何使用 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);
    });

}

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> ); }