React Native将一个组件传递给另一组件

Question

Am new to the React world , so am facing issues with communications between the components. We have a 3 step login screen , and each screen has a top banner image and main background image , also few links in the footer .and the only difference is that in each screen we will have different form fields. lets say in the first screen we will have user name and a button , on the second screen some label and a text fields , and in the last screen we will have password fields and a image .

So what am planning is that i want to create a Index component with the common elements like i said the header logo, and the main image , and the footer . and i want to pass the components of the 3 screens into that so that Index will render the passed components , so if i pass the first component it should display the header logo , main image ,footer and the first screen component .

This is the first component which is calling Index and passing the LoginForm ,but its not rendering the passed LoginForm component, it just display the images of the Index component only. How can i display the passed LoginForm within the Index component ?

import { LoginForm } from "./shared-components/LoginForm";
import { Index } from "./shared-components/Index";

export class Login extends Component {
  constructor(prop) {
    super(prop);
    this.state = { username: "", password: "", result: [], isLoading: false };
  }

  render() {
    return <Index passedForm={LoginForm} />;
  }
}

This is the Index component

import React from "react";
import { Image, ImageBackground } from "react-native";
import { Container, Content, View } from "native-base";
export class Index extends React.Component {
  constructor(prop) {
    super(prop);
    this.state = { username: "", password: "", result: [], isLoading: false };
  }


  render() {
    return (
      <Container>
        <Content>
          <Image
            source={require("../assets/finastra_logo.jpg")}
            style={{
              maxHeight: 150,
              alignSelf: "center",
              maxWidth: 215,
              flex: 1
            }}
          />
          <ImageBackground
            resizeMode="cover"
            blurRadius={3}
            source={require("../assets/frond.jpg")}
            style={{ alignSelf: "stretch", height: 500, marginBottom: 20 }}
          >
            {this.props.passedForm}
          </ImageBackground>
        </Content>
      </Container>
    );
  }
}

Answer 1

You could fix it by passing the <LoginForm /> component instead of LoginForm .

But this is a good use case for the children property:

In Login.js, you can render:

render() {
  return (
    <Index>
      <LoginForm />
    </Index>
  );
}

Then you can display the form in Index.js using:

{this.props.children}

Answer 2

You can pass it to variable and then use that variable to render

const PassedForm = this.props.passedForm;

And then render it like you would usually render components

<PassedForm />