[英]In ReactJS, how do I render one component within another?
I'm writing a ReactJS app, and want to show a landing page which displays either a Sign In form or a Register form, depending on which link was followed.我正在编写一个 ReactJS 应用程序,并希望显示一个登录页面,该页面显示登录表单或注册表单,具体取决于所访问的链接。
So far, my App component looks like this:到目前为止,我的 App 组件如下所示:
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>
);
Now, I'm not sure how to get the actual sub-pages to show within the landing page.现在,我不确定如何让实际的子页面显示在登录页面中。
In my landingpage component, I have this:在我的登录页面组件中,我有这个:
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;
but it doesn't show anything when I go to 'landingpage/signin'.但是当我将 go 设置为“登陆页面/登录”时,它没有显示任何内容。 I can see in the console that this.state.subPage contains the correct component, and when I change the Route to show the SignInPage directly, that works fine, so the SignInPage is definitely working ok on its own.我可以在控制台中看到 this.state.subPage 包含正确的组件,并且当我更改 Route 以直接显示 SignInPage 时,它工作正常,因此 SignInPage 本身肯定可以正常工作。
My SignInPage component contains:我的 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 };
I'm guessing that maybe the issue is that SignInForm is a component but SignInPage isn't?我猜可能问题是 SignInForm 是一个组件,但 SignInPage 不是? But I'm new to React, so I don't know how to reconfigure them!但是我是 React 的新手,所以我不知道如何重新配置它们!
What can I try next?接下来我可以尝试什么?
Since you are passing the subPage
to the LandingPage
as props, you can take that component from props and render it like below由于您将LandingPage
作为道具传递给subPage
,因此您可以从道具中获取该组件并将其呈现如下
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;
NOTE: You don't need to copy props into state注意:您不需要将道具复制到 state
In App component:在 App 组件中:
<Route render={(props) => <LandingPage {...props}><SignInPage /></LandingPage>}/>
In landingpage component:在登录页面组件中:
<div className="wrapper">
<div>{this.props.children}</div>
</div>
Instead of explicitly passing the components as props
to LandingPage
component, you can nest them inside the LandingPage
component无需将组件作为props
显式传递给LandingPage
组件,您可以将它们嵌套在LandingPage
组件中
<LandingPage {...props}>
<SignInPage />
</LandingPage>
SignIn
component will be passed to the LandingPage
component as props and will be accessible using props.children
SignIn
组件将作为 props 传递给LandingPage
组件,并且可以使用props.children
访问
return (
<div className="wrapper">
{this.props.children}
</div>
);
An advantage of this approach is that you can nest as many components inside LandingPage
component and they all will be rendered inside LandingPage
component using this.props.children
这种方法的一个优点是您可以在LandingPage
组件中嵌套尽可能多的组件,并且它们都将使用this.props.children
在LandingPage
组件中呈现
Your routes will look like this after this change更改后您的路线将如下所示
<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>}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.