有没有办法一次返回 3 个元素？答案

【问题标题】：Is there way to return 3 elements in one return?有没有办法一次返回 3 个元素？
【发布时间】：2020-05-05 16:31:00
【问题描述】：

我尝试按以下顺序返回以下 3 个元素，但它对我不起作用：我想返回 AzureLoginView 和视图，而且只有我想要返回 PlacesNavigator 和模态

render() {

    if (!this.state.loginSuccess) {

      return (
        <AzureLoginView
          azureInstance={this.azureInstance}
          loadingMessage={<Text style={{ fontSize: 20, fontWeight: "bold" }}>waiting...</Text>}
          onSuccess={this._onLoginSuccess}
        />
      )
return(
  <View style={styles.container}>
            <Text style={{
              fontSize: 20,
              fontWeight: 'bold',
              textAlign: 'center'
            }}> conect to-{"\n"}{givenName + " " + surname}</Text>
          </View>
);

    }
    const { userPrincipalName, givenName, surname } = this.state.azureLoginObject;
    return (
      <PlacesNavigator /> ,
      <Modal />
    );
  }

【问题讨论】：

标签： javascript react-native components expo element

【解决方案1】：

正如@norbitrial 所说，您需要将它们包围在<div> 或React.Fragment 元素中。或者你可以像这样返回一个元素数组

if (this.state.loginSuccess) {
      return ([
        <Modal /> ,

        <PlacesNavigator /> ,

        <View style={styles.container}>
          <Text style={{
            fontSize: 20,
            fontWeight: 'bold',
            textAlign: 'center'
          }}> conect to-{"\n"}{givenName + " " + surname}</Text>
        </View>


        // 

      ]);
    }

【讨论】：

【解决方案2】：

您需要将它们包裹在周围的 <div> 或 React.Fragment 元素中。

React 中的一个常见模式是组件返回多个元素。片段让您可以对子列表进行分组，而无需向 DOM 添加额外的节点。

尝试以下 - 基于评论部分，刚刚更新了订单或组件：

return (
    <>
        <View style={styles.container}>
          <Text style={{
            fontSize: 20,
            fontWeight: 'bold',
            textAlign: 'center'
          }}> conect to-{"\n"}{givenName + " " + surname}</Text>
        </View>
        <Modal />
        <PlacesNavigator />
    </>
);

通过这种方式，它将以您想要添加到render中的所有组件的方式返回。

希望对你有帮助！

【讨论】：

我需要先返回视图，然后是模态，然后是 placenavigator.. 我该怎么做？
@zibi 然后根据需要对元素重新排序。
它把所有东西都归还给我，我需要它先返回视图，然后再返回视图
@zibi 你能帮我理解一下先返回视图然后再返回视图是什么意思吗？您的意思是某种延迟或不作为提供解决方案的答案吗？我的意思是，如果您按特定顺序放置在 <></> 片段之间，则它会按该顺序返回。此外，我已按照您的建议更新了按该顺序返回的答案。谢谢！