Javascript 在ReactJS中，如何在另一个组件中呈现一个组件？

我正在编写一个ReactJS应用程序，并希望显示一个登录页面，该页面显示登录表单或注册表单，具体取决于遵循的链接

到目前为止，我的应用程序组件如下所示：

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.LANDING}  render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
      <Route path={ROUTES.SIGNIN}   render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
      <Route path={ROUTES.REGISTER} render={(props) => <LandingPage {...props} subPage={RegisterPage} />}/>
      <Route render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
    </div>
  </Router>
);

现在，我不知道如何在登录页中显示实际的子页

在我的登录页面组件中，我有：

class LandingPage extends Component {
  constructor(props) {
    super(props);

    this.state = {props}

  }

  render() {

    return (
      <div className="wrapper">
        <div>{this.state.subPage}</div>
      </div>
    );
  }
}

export default LandingPage;

但当我进入“登录页面/登录”时，它没有显示任何内容。我可以在控制台中看到，this.state.subPage包含正确的组件，当我更改路由以直接显示SignInPage时，效果很好，因此SignInPage本身肯定工作正常

我的登录页组件包含：

const SignInPage = () => (
  <div>
    <p>Sign In</p>
    <SignInForm />
  </div>
);

class SignInFormBase extends Component {
  constructor(props) {
    super(props);

  }

  onSubmit = event => {
    // This will handle form submission
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input name="email" placeholder="Email Address" />
        <input name="password" type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </form>
    );
  }
}
const SignInForm = compose(
  withRouter,
  withFirebase,
)(SignInFormBase);

export default SignInPage;

export { SignInForm };

我猜问题可能在于SignInfo是一个组件，而SignInPage不是？但我是新来的反应，所以我不知道如何重新配置它们

下一步我可以尝试什么？

由于您将子页面作为道具传递到登录页面，因此您可以从道具中获取该组件，并将其呈现为如下所示

class LandingPage extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    const SubPage = this.props.subPage;
    return (
      <div className="wrapper">
        <div><SubPage /></div>
      </div>
    );
  }
}

export default LandingPage;

注意：您不需要将道具复制到状态

，因为您将子页面作为道具传递到登录页面，您可以从道具中获取该组件，并按如下方式呈现它

class LandingPage extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    const SubPage = this.props.subPage;
    return (
      <div className="wrapper">
        <div><SubPage /></div>
      </div>
    );
  }
}

export default LandingPage;

注意：您不需要将道具复制到应用程序组件中的状态：

<Route render={(props) => <LandingPage {...props}><SignInPage /></LandingPage>}/>

<div className="wrapper">
 <div>{this.props.children}</div>
</div>

在登录页面组件中：

<Route render={(props) => <LandingPage {...props}><SignInPage /></LandingPage>}/>

<div className="wrapper">
 <div>{this.props.children}</div>
</div>

应用程序内组件：

<Route render={(props) => <LandingPage {...props}><SignInPage /></LandingPage>}/>

<div className="wrapper">
 <div>{this.props.children}</div>
</div>

在登录页面组件中：

<Route render={(props) => <LandingPage {...props}><SignInPage /></LandingPage>}/>

<div className="wrapper">
 <div>{this.props.children}</div>
</div>

---

您可以将组件嵌套在LandingPage组件中，而不是将组件作为道具显式传递给LandingPage组件

<LandingPage {...props}>
   <SignInPage />
</LandingPage>

这种方法的一个优点是，您可以在LandingPage组件中嵌套尽可能多的组件，并且它们都将使用this.props.children在LandingPage组件中呈现

更改后，您的路线将如下所示

<Route path={ROUTES.LANDING} render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage> }/>
<Route path={ROUTES.SIGNIN} render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage>}/>
<Route path={ROUTES.REGISTER} render={(props) => <LandingPage {...props}> <RegisterPage/> </LandingPage>}/>
<Route render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage>}/>

---

您可以将组件嵌套在LandingPage组件中，而不是将组件作为道具显式传递给LandingPage组件

<LandingPage {...props}>
   <SignInPage />
</LandingPage>

这种方法的一个优点是，您可以在LandingPage组件中嵌套尽可能多的组件，并且它们都将使用this.props.children在LandingPage组件中呈现

更改后，您的路线将如下所示

<Route path={ROUTES.LANDING} render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage> }/>
<Route path={ROUTES.SIGNIN} render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage>}/>
<Route path={ROUTES.REGISTER} render={(props) => <LandingPage {...props}> <RegisterPage/> </LandingPage>}/>
<Route render={(props) => <LandingPage {...props}> <SignInPage/> </LandingPage>}/>

---

您还可以在JSX中呈现然后执行{this.props.children}。谢谢。知道这一点很好。您还可以在JSX中渲染然后执行{this.props.children}。谢谢。很高兴知道，谢谢。那很有帮助。渲染时是否有方法区分子对象？{this.props.children.children}>或者类似的东西？@Sharon this.props.children将是一个数组。可以使用数组索引访问和呈现特定的子元素。第一个子元素将位于此.props.children[0]等等…谢谢。那很有帮助。渲染时是否有方法区分子对象？{this.props.children.children}>或者类似的东西？@Sharon this.props.children将是一个数组。可以使用数组索引访问和呈现特定的子元素。第一个子元素将出现在这个.props.children[0]等等…谢谢！这很有帮助。我已经试过了，效果很好，非常感谢！我认为这是正确的答案，因为这是我使用的答案，但其他解决方案似乎也很有效谢谢！这很有帮助。我已经试过了，效果很好，非常感谢！我认为这是正确的答案，因为这是我使用的答案，但其他的解决方案似乎也很有效