Есть ли способ вернуть 3 элемента за один возврат?

Question

Я пытаюсь вернуть следующие 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 />
    );
  }

Answer 1

Вам нужно заключить их в окружающий элемент <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.

Надеюсь, это поможет!

Answer 2

Как сказал @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>


        // 

      ]);
    }