javascript - React Native jsx中三元内的.map()函数

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> 数组作为单独的代码块(但在 return 方法的 render() 语句之外)，然后将此数组直接放入返回的 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/>;
}