Question

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

父母
- 孩子

我的JSON看起来像这样

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

我的想法是创建一个TreeLevel并在每个<li>上都有一个单击处理程序。如果有孩子，它将<ul>附加到<li>

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

这是我来自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'));

我可以获得第一级（parentId = 0），但是当我尝试在每个<li>标签上放置一个 click事件时，我不知道如何< strong>将HTML 从TreeLevel组件附加到DOM，更不用说在正确的位置了。

我将以下教程用作宽松的指南。 React Tutorial

有什么想法吗？

Answer 1

免责声明：我也刚开始使用ReactJS。但我希望能帮到您。因此，假设我的建议和代码不是100％正确。

Component应该始终是Class。

在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"));

您的showChildren函数也应该放在类TreeLevel中。并且可以用this.showChildren()来引用。

但是，我认为您弄错了基本原理。我的建议是先通读文档。我也还没有100％知道，但是我认为它正在慢慢开始点击。

使用React.js从同一JSON嵌套具有父ID的树

1 个答案: