Javascript 相邻的JSX元素必须包装在图像的封闭标记中？

我在

View

上查找了其他答案，例如使用

flex:1

，但仍然得到相同的错误。我认为这与相邻的

图像

标签有关

    render() {
    return (

      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) =>
          <View style={{flex: 1}}>

          {this.state.username   ?
          <Image source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>
          <Image square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>
          <Text style={styles.nameText}>{item.first_name} {item.last_name}</Text>
          :

          <Image source={drawerCover} style={styles.drawerCover} />
          <Image square style={styles.drawerImage} source={drawerImage} />

          }
          </View>
        }
              keyExtractor={(item, index) => index}
         />



          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

render（）{
返回(
{this.state.username？
{item.first_name}{item.last_name}
:
}
}
keyExtractor={（项，索引）=>index}
/>
this.props.navigation.navigate（data.route）}
>
{data.name}
{data.types&&
{`${data.types}types`}
}
}
/>
);
}
}

---

这是抽屉导航，我希望它看起来像一个材料设计。也就是说，如果用户已登录，则显示该用户的图像。如果没有，则返回默认图像。

使用JSX时，只能返回单个元素。在您的解决方案中，有多个元素是图像组件。解决这个问题的方法是将所有元素都封装在一个div中。

使用JSX时，只能返回一个元素。在您的解决方案中，有多个元素是图像组件。解决这一问题的方法是将所有元素包装在一个div中。

我不会引入新元素来包装图像并人为地消除错误，您可以返回一个组件列表（数组），因为渲染的是单亲元素，为了简洁，我删除了一些代码：

      /* CUT */
      renderItem={({item}) =>
      <View style={{flex: 1}}>

      {this.state.username   ?
      [
          <Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
          <Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
          <Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
      ]
      :
      [
          <Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
          <Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
      ]
      }
      </View>
    }
          keyExtractor={(item, index) => index}
     />
      /* CUT */

/*CUT*/
renderItem={（{item}）=>
{this.state.username？
[
,
,
{item.first_name}{item.last_name}
]
:
[
,
]
}
}
keyExtractor={（项，索引）=>index}
/>
/*削减*/

我不会引入新元素来包装图像并人为地消除错误，您可以返回组件列表（数组），因为渲染的是单亲元素，为了简洁起见，我删除了一些代码：

      /* CUT */
      renderItem={({item}) =>
      <View style={{flex: 1}}>

      {this.state.username   ?
      [
          <Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
          <Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
          <Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
      ]
      :
      [
          <Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
          <Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
      ]
      }
      </View>
    }
          keyExtractor={(item, index) => index}
     />
      /* CUT */

/*CUT*/
renderItem={（{item}）=>
{this.state.username？
[
,
,
{item.first_name}{item.last_name}
]
:
[
,
]
}
}
keyExtractor={（项，索引）=>index}
/>
/*削减*/

如前所述，它与任何标记有关。

{this.state.username？[]：[]}

-使用数组，当您已经拥有单亲视图时，您不必将其包装在另一个div中-只需记住添加

键

属性。如果您使用的是React>=16，使用专门为此场景构建的

React.Fragment

，并避免添加额外的

div

，如前所述，它与任何标记有关。

{this.state.username？[]：[]}

-使用数组，当您已经有了单亲视图时，您不必将其包装在另一个div中-只需记住添加

键

道具。如果您使用的是React>=16，请使用专门为此场景构建的

React.Fragment

，避免添加额外的

div

谢谢@Rohith RajasekharanThank谢谢你@罗希思·拉贾塞哈兰