.map() 函数在三元内反应原生 jsx

Question

对不起，这是新手问题，通常在组件中使用<List>{this.state.variable.map...}</List>。但是如何在三元运算符的条件渲染中使用.map函数/任何函数？在下面使用此语法时给出错误语法

代码：

{group.category !== "place" ? 
                <ListItem
                  title={"Foods"}
                  leftIcon={{
                    name: "food",
                    type: "material-community",
                    color: this.state.themeStore.primaryDarkColor
                  }}
                  subtitle={group.category}
                  subtitleStyle={{
                    color: this.state.themeStore.primaryDarkColor
                  }}
                  titleStyle={{ color: this.state.themeStore.primaryDarkColor }}
                  onPressRightIcon={() => {
                    this.showFoodsItem();
                  }}
                  rightIcon={{
                    name: "md-arrow-dropdown-circle",
                    type: "ionicon",
                    color: this.state.themeStore.primaryLightColor
                  }}
                />

                this.state.foods.map((item, i) => (
                  <ListItem
                    key={i}
                    title={item.name}
                    titleStyle={{
                      color: this.state.themeStore.primaryDarkColor
                    }}
                    avatar={{ uri: item.imageSource }}
                    rightIcon={{
                      name: "md-add-circle",
                      type: "ionicon",
                      color: this.state.themeStore.primaryLightColor
                    }}
                    onPressRightIcon={() => this.addExistingPlace(item)}
                  />
                )
 : (
                <View />
              )}

Answer 1

这不是三元运算符的问题。 React 期望您返回单个孩子（或者在 React 16+ 的情况下 - 孩子数组），但您有多个孩子。

你可以通过重构你的代码来解决这个问题，它会将<ListItem>数组准备为单独的代码块（但在render()方法的return语句之外），然后直接放置这个数组进入返回的 JSX 树（在 React 16+ 的情况下）或使用额外的包装器，如 React.createElement('div',{},...listItems)

所以您的代码可能如下所示：

render() {
    let items = [
        <ListItem
            title={"Foods"}
            leftIcon={{
                name: "food",
                type: "material-community",
                color: this.state.themeStore.primaryDarkColor
            }}
            subtitle={group.category}
            subtitleStyle={{
                color: this.state.themeStore.primaryDarkColor
            }}
            titleStyle={{color: this.state.themeStore.primaryDarkColor}}
            onPressRightIcon={() => {
                this.showFoodsItem();
            }}
            rightIcon={{
                name: "md-arrow-dropdown-circle",
                type: "ionicon",
                color: this.state.themeStore.primaryLightColor
            }}
        />
    ];
    this.state.foods.forEach((item, i) => (
        items.push(<ListItem
                key={i}
                title={item.name}
                titleStyle={{
                    color: this.state.themeStore.primaryDarkColor
                }}
                avatar={{uri: item.imageSource}}
                rightIcon={{
                    name: "md-add-circle",
                    type: "ionicon",
                    color: this.state.themeStore.primaryLightColor
                }}
                onPressRightIcon={() => this.addExistingPlace(item)}
            />
        )
    ));
    return group.category !== "place" ? React.createElement('div', {}, ...items) : <View/>;
}