Question

我想在一个屏幕上浏览一个包含许多子项的数组，以便创建一个缩进列表，如下所示： 1.一些项目 1.1。一些项目 1.1.1。一些项目 1.2。一些物品

我发现的一种方法是使用对象创建一个数组，如下所示：

names: [
  {
    id: 0,
    level: 1,
    name: "Football",
    children: [
      {
        id: 1,
        level: 2,
        name: "Shoes",
        children: [
          {
            id: 2,
            level: 3,
            name: "Shoes 1"
          },
          {
            id: 3,
            level: 3,
            name: "Shoes 2"
          },
          {
            id: 4,
            level: 3,
            name: "Shoes 3"
          }
        ]
      }
    ]
  }
];

我已经尝试使用map浏览该数组：

this.state.names.map((item, index) => (
  <TouchableOpacity>
    key={item.id}
    style={styles.container}
    onPress={() => this.alertItemName(item)}>
    <Text style={styles.text}>{item.name}</Text>
  </TouchableOpacity>
));

但是，这种方法仅浏览第一个级别1的项目。

我不知道我是否使用正确的组件和正确的方法来执行此操作。我也查看了FlatList组件，但遇到了同样的问题。

Answer 1

您可以在地图中使用地图

A = rand(3,3);
A(2,2,1)
ans =
    0.4854
A(2,2,1,1)
ans =
    0.4854

size(A)
ans =
     3     3
size(A,4)
ans =
     1

Answer 2

您可以执行以下递归操作：

renderItems = items => (
  items.map((item, index) => this.renderItem(item, index));
);

renderItem = (item, index) => (
  <Component key={index}>
    // Do something with your item,
    // then call renderItems() again if there's a children array.
    {item.children && this.renderItems(item.children)}
  </Component>
);

然后在您的render()函数中，您将像这样使用它：

return this.renderItems(this.state.names);

简单的工作示例：

const names = [
  {
    id: 0,
    level: 1,
    name: "Football",
    children: [
      {
        id: 1,
        level: 2,
        name: "Shoes",
        children: [
          {
            id: 2,
            level: 3,
            name: "Shoes 1"
          },
          {
            id: 3,
            level: 3,
            name: "Shoes 2"
          },
          {
            id: 4,
            level: 3,
            name: "Shoes 3"
          }
        ]
      }
    ]
  }
];

class App extends React.Component {
  renderItems(items) {
    return <ul>{items.map((item, index) => this.renderItem(item, index))}</ul>;
  }

  renderItem(item, index) {
    return (
      <li key={index}>
        {item.name}
        {item.children && this.renderItems(item.children)}
      </li>
    );
  }
  
  render() {
    return this.renderItems(names);
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id="app"></div>
</body>

React Native：如何浏览有很多孩子的数组

2 个答案: