React Native组件传参问题：如何渲染传入Index的子组件

嘿，我看你在React Native组件通信上遇到了点小麻烦——想把登录表单传入Index组件但没渲染出来，对吧？咱们来一步步解决这个问题。

问题根源 #

你现在的问题在于：在Login组件里把LoginForm这个组件类作为props传给了Index，但在Index的render方法里直接写{this.props.passedForm}是无效的。React需要的是组件实例（也就是JSX元素），而不是组件类本身的引用。

两种解决方案 #

方案1：直接传入JSX元素（最简单）

在Login组件里，把LoginForm转换成JSX元素再传递，这样Index可以直接渲染它：

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() {
    // 传递JSX元素而非组件类
    return <Index passedForm={<LoginForm />} />;
  }
}

Index组件不需要修改，保持原来的{this.props.passedForm}即可，因为现在传入的已经是可以直接渲染的组件实例了。

方案2：在Index组件中渲染传入的组件类

如果你需要在Index里给表单组件传递额外的props（比如共享状态、回调函数），可以在Index里把传入的组件类转换成JSX元素：

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() {
    // 先把props里的组件类赋值给一个大写开头的变量（React要求组件名大写）
    const PassedForm = this.props.passedForm;
    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 }} >
            {/* 用JSX标签渲染组件实例，还可以在这里传递额外props */}
            <PassedForm 
              username={this.state.username}
              onUsernameChange={(text) => this.setState({username: text})}
            />
          </ImageBackground>
        </Content>
      </Container>
    );
  }
}

这种方式的好处是可以让Index组件和传入的表单共享状态或回调，适合你的三步登录场景——比如可以在Index里统一管理登录流程的状态，再传递给不同的表单组件。

补充说明 #

React的规则是：只有大写开头的变量（代表组件类）用<>包裹后，才会被识别为组件实例进行渲染。直接写{this.props.passedForm}只会输出组件类的引用，不会渲染任何UI元素。

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