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属性执行），但主要工作将在List中，例如< / p>

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

Answer 2

我会在List组件中执行此操作。如果您的List组件很大，我会将它们放在另一个帮助文件中以要求它。

React渲染嵌套的json

2 个答案: