Question

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

代码：

{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/>;
}

反应原生jsx中的三元组内部的.map（）函数

1 个答案: