javascript - 将 JSX 元素作为数组中另一个 JSX 元素的子元素推送 (ReactJS)

Question

我正在编写一个 react 应用程序来从嵌套对象数组中打印 TreeView 。每个节点都应该是可折叠的(默认打开)。一个节点可以有任意数量的子节点。这是我想要实现的示例:

我正在将所有节点组件收集到一个数组中，然后在 render 方法中访问该集合。现在所有节点组件都以相同的层次结构打印，因为它们没有相互嵌套。在下面的代码中，如何添加 <PrintNode treeData={obj}作为 <PrintNode treeData={obj} hasChildNodes={true} /> 的 child 在treeToRender数组？

应用程序.js:

import React from 'react';
import PrintNode from './components/PrintNode';

export default class App extends React.Component {
  data = [ // this data will come from another file in real app
    {
      text: 'Parent 1',
      nodes: [
        {
          text: 'Child 1',
          nodes: [
            {
              text: 'Grandchild 1'
            },
            {
              text: 'Grandchild 2'
            }
          ]
        },
        {
          text: 'Child 2'
        }
      ]
    },
    {
      text: 'Parent 2'
    },
    {
      text: 'Parent 3'
    },
    {
      text: 'Parent 4'
    },
    {
      text: 'Parent 5'
    }
  ];

  treeToRender = [];

  getNextNode(nextData) {
    let key = 0;
    for (let i = 0; i < nextData.length; i++) {
      let obj = nextData[i];
      if (!obj.nodes) {
        this.treeToRender.push(<PrintNode treeData={obj} />)
        key++;
      }
      else {
        this.treeToRender.push(<PrintNode treeData={obj} hasChildNodes={true} />)
        key++;
        this.getNextNode(obj.nodes);
      }
    }
    return this.treeToRender;
  }

  render() {
    return (
      <div className="app-container">
        {this.getNextNode(this.data)}
      </div>
    );
  }
}

打印节点

import React from 'react';

export default class PrintNode extends React.Component {
    render() {
        let nodeToRender = '';
        if (this.props.hasChildNodes) {
            nodeToRender = <div className="has-child">{this.props.treeData.text}</div>
        }
        else {
            nodeToRender = <div>{this.props.treeData.text}</div>
        }
        return (
            <div>
                <div>{this.props.treeData.text}</div>
            </div>
        );
    }
}

请注意，每个 JSX 元素都是一个对象，而不是可以轻松操作的字符串。

我还收到错误消息“数组或迭代器中的每个子项都应该有一个唯一的“键”属性。检查 App 的渲染方法。”即使我已将 key 添加到 PrintNode。为什么会这样？

这是 fiddle .

Answer 1

这是一个更新的解决方案。我希望这可以帮助您了解如何递归构建 JSX 对象。

我提供了一个 Codepen也供您查看，以便您可以查看工作代码。

function createTree(data) {
    return (
        <ul>
            {
                data.map((node) => {
                    return createNode(node);
                })
            }
        </ul>
    );
}

function createNode(data) {
    if (data.nodes) {
        return (
      <li>
        <PrintNode text={ data.text }>{createTree(data.nodes)}</PrintNode>
      </li>
    );
    } else {
        return <PrintNode text={ data.text } />
    }
}

const PrintNode = (props) => {
    return <li>{ props.text }{ props.children }</li>
};

const App = (props) => {
    return createTree(props.data);
}

ReactDOM.render(<App data={ data } />, document.getElementById("app"));

const data = [
    {
        text: 'Parent 1',
        nodes: [
            {
                text: 'Child 1',
                nodes: [
                    {
                        text: 'Grandchild 1'
                    },
                    {
                        text: 'Grandchild 2'
                    }
                ]
            },
            {
                text: 'Child 2'
            }
        ]
    },
    {
        text: 'Parent 2'
    },
    {
        text: 'Parent 3'
    },
    {
        text: 'Parent 4'
    },
    {
        text: 'Parent 5'
    }
];