javascript - 返回 map 内的嵌套 View

Question

您好，这是我的父组件代码

renderMenu() {
if (this.props.menu) {
  return (
    <List menu={this.props.menu} />
  );
}
}
render() {
  console.log(this.props);
  const { ContainerStyle } = styles;
  return (
    <View style={ContainerStyle}>
      {this.renderRestaurantName()}
        <ScrollView>
        {this.renderSpinner()}
        {this.renderMenu()}
        </ScrollView>
    </View>
);
}

在列表内部我返回嵌套在 map 中的 View List.js =>

renderItem() {
return (
  this.props.menu.map(({ name, items }) => {
      <View>
        <Text>{name}</Text>
      </View>
      {
        items.map((resp) => {
          return (
          <View>
            <Text>{resp.title}</Text>
          </View>
        );
        });
      }
  })
 );
 }
render() {
return (
  <View>
  {this.renderItem()}
  </View>
);
}
}

即使我可以使用 console.log 查看内容，屏幕上也没有显示任何内容。我在这里做错了什么？ 我还应该使用其他东西来解析 JSON 吗？

这也是 JSON 数据

我解析正确吗？

Answer 1

显示列表的最佳方式是使用 FlatList Read docs

您可以这样使用它:

render(){
    return(
        <FlatList
              data={this.props.menu}
              renderItem={({item})=>this._renderListMenu(item)}
              keyExtractor={(item,index)=>index}
         />
    )
}

 _renderListMenu(item){
    return <MyMenu Menu={item} />
}

在其他类(MyMenu)中:

export default class MyMenu extends Component{
render(){
    const {name , items } = this.props.Menu;
    return(
        <View>
            <Text>{name}</Text>
            <FlatList
              data={items}
              renderItem={({item})=>this._renderListItem(item)}
              keyExtractor={(item,index)=>index}
            />
        </View>
    )
}
_renderListItem(item){
     return <MyItem item={item}/>
}
}

然后您创建 MyItem 类，如上面的示例