Javascript 从JSON数组响应treeview

我正在使用react从JSON生成一个树状视图。到目前为止，我使用以下示例数据制作了一棵可折叠树：

var data = {
      title: "Node 1",
      childNodes: [
        {title: "Childnode 1.1"},
        {title: "Childnode 1.2",
          childNodes: [
            {title: "Childnode 1.2.1",
              childNodes: [
                {title: "Childnode 1.2.1.1"}
              ]}, {title: "Childnode 1.2.2"}
          ]}
      ]
    };

但这是一个目标。我想获取对象的JSON数组作为输入，并从中生成treeview，但我不知道在哪里更改代码

下面是我的渲染函数：

render() {
    var childNodes;

    if (this.props.node.childNodes != null) {
      childNodes = this.props.node.childNodes.map(function (node, index) {
        return <li key={index}><Treeview node={node}/></li>
      });
    }

    return (
      <form>
        <div>
          <input type="checkbox"/>
          <label for>{this.props.node.title}</label>
        </div>
        <ul>
          {childNodes}
        </ul>
      </form>

    );
  }

render（）{
var-childNodes；
if（this.props.node.childNodes！=null）{
childNodes=this.props.node.childNodes.map（函数（节点，索引）{
return

});
}
返回(
{this.props.node.title}

{childNodes}

);
}

如何更改代码以处理整个数组而不是一个对象？

递归很有趣

const data = [{
  title: "Node 1",
  childNodes: [
    { title: "Childnode 1.1" },
    {
      title: "Childnode 1.2",
      childNodes: [
        {
          title: "Childnode 1.2.1",
          childNodes: [
            { title: "Childnode 1.2.1.1" }
          ]
        }, { title: "Childnode 1.2.2" }
      ]
    }
  ]
}];

const App = () => (
  <form>
    <Tree data={data} />
  </form>
);

const Tree = ({data}) => ( 
  <ul>
    {data && data.map(item => (
      <li>
        {item.title}
        {item.childNodes && <Tree data={item.childNodes} />}
      </li>
    ))}
  </ul>
);

const数据=[{
标题：“节点1”，
子节点：[
{标题：“Childnode 1.1”}，
{
标题：“Childnode 1.2”，
子节点：[
{
标题：“Childnode 1.2.1”，
子节点：[
{标题：“Childnode 1.2.1.1”}
]
}，{标题：“Childnode 1.2.2”}
]
}
]
}];
常量应用=（）=>(
);
常量树=（{data}）=>（

{data&&data.map（项=>(

{item.title}
{item.childNodes&&}

))}

);

---

演示：

下面的示例可以处理我测试过的所有json对象 签出我的github回购： 生成的html与

---

那么您希望Treeview组件接受对象数组？或者您想将数组转换为Treeview的对象？我想让Treeview组件接受对象数组，例如：[{“id”：28，“Title”：“Sweden”}，{“id”：56，“Title”：“USA”}，{“id”：89，“Title”：“England”}]好的，让我看看Treeview组件的代码。我发布的代码是if Treeview组件。我正在Treeview中呈现这个代码块，也就是说，非常感谢。成功了。有没有办法将父节点和子节点的“div”分开，以便在切换复选框时树是可折叠的？对不起，我已更新为使用列表项而不是div。只需在ul上放置一个

onClick

处理程序，并切换树组件的“可见性”状态，然后根据该状态有条件地进行渲染。您必须使其成为一个有状态类组件（而不是当前的无状态功能组件）。如果可能，您可以共享与toggle相关的代码吗。。在这里如何修复切换选项我无法找到插入符号和其他切换功能，请您指导我或创建沙盒以供参考。谢谢..完整的工作示例在中

class Tree extends React.Component {

   

    processObject = (object) =>
        Object.keys(object).map((key, reactKey) => {
            return (
                <li key={reactKey + key}>
                    {this.buildNode(key)}
                    <ul className="nested">
                        {this.isPrimative(object[key]) ? this.buildLeaf(object[key]) :
                            this.isArray(object[key]) ? this.loopArray(object[key]) : this.processObject(object[key])}
                    </ul>
                </li>
            )
        })

    loopArray = (array) =>
        array.map((value, key) =>
            <div key={key + value}>
                {this.isPrimative(value) ? this.buildLeaf(value) :
                    this.isArray(value) ? this.loopArray(value) : this.processObject(value)}
            </div>
        )

    isArray = (value) =>
        Array.isArray(value)

    isPrimative = (value) => {
        return typeof (value) === 'string'
            || typeof (value) === 'number'
            || typeof (value) === 'boolean'
    }

    buildNode = (key: string) =>
        <span className="node"
              onClick={
                  (e) => {
                      this.toggle(e)
                  }}>
             {key}
            </span>

    buildLeaf = (value: string) =>
        <li className="leaf"
            onClick={
                (e) => {

                }}>
            {value}
        </li>

    toggle = (event) => {
        event.target.parentElement.querySelector(".nested").classList.toggle("active");
        event.target.classList.toggle("node-down");
    }

    render = () => <>
        <ul id="myUL">
            {this.processObject(json)}
        </ul>
    </>
}

export default Tree;

/* Remove default bullets */
ul, #myUL {
    list-style-type: none;
}

body {
    background: red;
}


/* Remove margins and padding from the parent ul */
#myUL {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    background: red;
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}