React中能否一次返回3个元素？我的代码实现遇阻求助

嘿，我看你遇到了React组件返回多个元素的问题，这其实是React里很常见的小坑，咱们一步步来解决它：

你的代码里的两个核心问题 #

1. 多个return语句无法同时执行：在第一个if (!this.state.loginSuccess)分支里，你写了两个return，但函数执行到第一个return就会直接退出，第二个return永远不会被触发，这就是你看不到后面那个<View>的原因。
2. render方法只能返回单个根元素：你最后用逗号分隔<PlacesNavigator />和<Modal />的写法是错误的，React不允许直接返回多个未包裹的组件。

解决方法：用容器或Fragment包裹多个元素 #

在React（包括React Native）中，要返回多个元素，必须把它们放在一个根容器里，或者用React Fragment（不会生成额外的DOM/视图节点）来包裹。

修正后的完整代码 #

render() {
  if (!this.state.loginSuccess) {
    // 把需要返回的两个组件放在同一个View里（或者用Fragment）
    return (
      <View>
        <AzureLoginView 
          azureInstance={this.azureInstance} 
          loadingMessage={<Text style={{ fontSize: 20, fontWeight: "bold" }}>waiting...</Text>} 
          onSuccess={this._onLoginSuccess} 
        />
        <View style={styles.container}>
          <Text style={{ fontSize: 20, fontWeight: 'bold', textAlign: 'center' }}>
            conect to-{"\n"}{givenName + " " + surname}
          </Text>
        </View>
      </View>
    );
  }

  const { userPrincipalName, givenName, surname } = this.state.azureLoginObject;
  // 登录成功后，用Fragment包裹两个组件（React Native支持<>语法）
  return (
    <>
      <PlacesNavigator />
      <Modal />
    </>
  );
}

额外说明 #

• 如果不想用<View>作为容器（避免额外的布局影响），可以用<React.Fragment>或者简写的<>...</>，这两种方式都不会在界面上生成额外的视图元素。
• 如果你选择用数组返回多个元素（比如return [ <PlacesNavigator key="nav" />, <Modal key="modal" /> ]），记得给每个元素添加唯一的key属性，否则会触发React的警告。

内容的提问来源于stack exchange，提问作者user12710522