[英]React stateless component not working
This is my code: 这是我的代码:
import React, { Component } from 'react'
import { BackButton } from 'components/button'
class LandingHeader extends Component {
render() {
const back = (props) => <BackButton forcedBackUrl={props.back.forcedBackUrl} />
return (
<div>
{back}
{this.props.children}
</div>
)
}
}
export default LandingHeader
If i put the <BackButton>
component directly it works but if I use a stateless component and return it inside this one it wont. 如果我直接放置
<BackButton>
组件,它将起作用,但是如果我使用无状态组件并将其返回到此组件中,它将不会。 What im missing? 我缺少什么?
Im following the official documentation ( https://facebook.github.io/react/docs/reusable-components.html ) and I can't see whats wrong. 我遵循官方文档( https://facebook.github.io/react/docs/reusable-components.html ),我看不出有什么问题。 Thanks.
谢谢。
Looking at the facebook documentation that you provided they give the example of : 查看您提供的facebook文档,他们给出了以下示例:
const HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
and not just returning {HelloMessage} 而不仅仅是返回{HelloMessage}
therefore replace 因此更换
{back}
with 与
<Back />
and you should be good to go 而且你应该很好走
You've declared a ReactClass
but you aren't rendering it - you have to turn it into a ReactElement
: 您已经声明了
ReactClass
但没有渲染它-您必须将其变成ReactElement
:
const Back = (props) => <BackButton forcedBackUrl={props.forcedBackUrl} />
return (
<div>
<Back {...this.props.back} />
{this.props.children}
</div>
);
You need to inject the props into the component 您需要将道具注入组件
import React, { Component } from 'react'
import { BackButton } from 'components/button'
class LandingHeader extends Component {
render() {
const back = (props) => <BackButton forcedBackUrl={props.back.forcedBackUrl} />
return (
<div>
{back(this.props)}
{this.props.children}
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.