React无状态组件不工作

React stateless component not working

本文关键字：工作 组件 状态 React      更新时间：2023-09-26

这是我的代码:

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

如果我把<BackButton>组件直接工作，但如果我使用一个无状态的组件，并返回它在这个里面，它不会。我错过了什么?

我遵循官方文档(https://facebook.github.io/react/docs/reusable-components.html)，我看不出有什么问题。谢谢。

看看你提供的facebook文档他们给出了一个例子:

const HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

而不只是返回{HelloMessage}

因此

代替

{back} 

<Back />

你应该可以走了

你已经声明了一个ReactClass，但你没有渲染它-你必须把它变成一个ReactElement:

const Back = (props) => <BackButton forcedBackUrl={props.forcedBackUrl} />
return (
  <div>
    <Back {...this.props.back} />
    {this.props.children}
  </div>
);

你需要把这些道具注入到组件中

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>
             )
        }
    }
相关文章：