reactjs - React渲染嵌套json

Question

我有一些像这样的 json

[
    {
    "name": "Hello Kitty",
    "items": [
        {
        "name": "Kitty Muu Muu"
      },
      {
        "name": "Kitty smack"
      }
    ]
  },
  {
    "name": "Hello Pussy",
    "items": [
            {
        "name": "World",
        "items": [
            {
            "name": "Hello Pussy world"
          }
        ]
      }
    ]
  }
]

它是嵌套的 JSON，我的问题是；应该在哪里处理递归性来渲染它？

我有 2 个组件 调用数据并将数据更改发送回服务器的列表组件

呈现单个项目的项目组件

我应该在列表级别还是项目级别处理这个问题？

该项目呈现一个可以更新的输入字段，这应该可以在父级和子级级别实现

Answer 1

您可以使用Item来显示子项(在React中，您可以使用children属性来完成)，但是主要工作将在列表，例如

class Item extends React.Component {
  render() {
    return <li>
      { this.props.name }
      { this.props.children }
    </li>
  }
}

class List extends React.Component {
  constructor() {
    super();
  }

  list(data) {
    const children = (items) => {
      if (items) {
        return <ul>{ this.list(items) }</ul>
      }
    }

    return data.map((node, index) => {
      return <Item key={ node.id } name={ node.name }>
        { children(node.items) }
      </Item>
    });
  }

  render() {
    return <ul>
      { this.list(this.props.data) }
    </ul>
  }
}

Example