使用Reactjs从同一JSON创建父Id为的嵌套树

我正在尝试使用Reactjs创建一个嵌套的排序树

• 母公司
  • 孩子

我的JSON看起来像这样

[{
    id: 45,
    parentId: 0;
},
{
    id: 49,
    parentId: 45;
}]

我的想法是创建一个TreeLevel，并在每个

上都有一个click处理程序。如果有子项，则会将该
附加到

//Here is my component call
<TreeLevel pId={pId} treeData={treeData} /> 

//-- component
const TreeLevel = (props) => {
    const temp = props.treeData.filter(tree => {
         return tree.parentId === props.pId;
    });

    const lis = temp.map((li, index) => {
        return (
            <li key={index} onClick={() => showChildren(li.id, props.treeData)}>
                {li.name}

            </li>
        );
    });

    return <ul>{lis}</ul>
}

function showChildren(pId, treeData) {
    // this doesn't work, but the idea of what I want it to do
    return ( <TreeLevel pId={pId} treeData={treeData} />);
}

class Tree extends Component {
    render() {
        const { treeData, pId } = this.props;

        return (
                <TreeLevel pId={pId} treeData={treeData} />
        );
    }
}

//这是我的组件调用
//--组成部分
const TreeLevel=（道具）=>{
const temp=props.treeData.filter（树=>{
返回tree.parentId==props.pId；
});
常数lis=温度图（li，索引）=>{
返回(
showChildren（li.id，props.treeData）}>
{li.name}

);
});
返回
{lis}
}
函数showChildren（pId、treeData）{
//这不管用，但我想让它做什么
返回（）；
}
类树扩展组件{
render（）{
const{treeData，pId}=this.props；
返回(
);
}
}

这是我在App.js上的主要通话

class App extends Component {
    state = {
        parentId: 0,
        treeData: [ // array of objects here
        ]
    };

  render() {
    const { treeData, pId } = this.state;

    return (
      <div>
        <Tree treeData={treeData} pId={parentId} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

类应用程序扩展组件{
状态={
父ID:0，
treeData:[//此处的对象数组
]
};
render（）{
const{treeData，pId}=this.state；
返回(
);
}
}
ReactDOM.render(

有什么想法吗？
免责声明：我也刚开始使用ReactJS。但我希望能帮助您。所以假设我的建议和代码不是100%正确

组件
应始终是
类

在
render（）
函数中，您可以写下代码（和JSX）。但只能呈现一个主元素。如果您有多个项目，请将它们的JSX放入一个数组中。稍后再呈现该
{array}

import React { Component } from 'react';
import ReactDOM from 'react-dom';

class TreeLevel extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const temp = this.props.treeData.filter(tree => {
            return tree.parentId === props.pId;
        });

        let liArray = [];

        const lis = temp.map((li, index) => {
            liArray.push(
                <li key={index} onClick={() => showChildren(li.id, props.treeData)}>
                    {li.name}
                </li>
            );
        });

        return (
            <ul>
                {liArray}
            </ul>
        );
    }
}

ReactDOM.render(<TreeLevel pId={pId} treeData={treeData} />, document.getElementById("app"));

从'React'导入React{Component}；
从“react dom”导入react dom；
类TreeLevel扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const temp=this.props.treeData.filter（tree=>{
返回tree.parentId==props.pId；
});
让雷=[]；
常数lis=温度图（li，索引）=>{
雷，推(
showChildren（li.id，props.treeData）}>
{li.name}

);
});
返回(

{lairray}

);
}
}
ReactDOM.render（，document.getElementById（“app”）；

您的
showChildren
函数也应该位于类
TreeLevel
中，并且可以使用
this.showChildren（）
进行引用

但是，我认为您的基本原理是错误的。我的建议是首先通读文档。我也没有100%理解它，但我认为它正在慢慢开始单击。
您是否使用
ReactDOM.render
函数来渲染
TreeLevel
组件？我在App.js文件。你也可以在这里添加完整的App.js吗？我用App.js的调用进行了更新。它显示了主级别
，这只是我遇到的递归和嵌套问题。你希望
showChildren
在这里做什么？我是根据本教程中的const变量，表行是used就像我对
li
所做的那样，看起来您只需要像我的最后一行代码一样
ReactDOM.render（）
您的
树
组件。