Question

这是我的代码：

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），我看不出什么是错的。感谢。

Answer 1

查看您提供的facebook文档，他们举例说明：

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

而不只是返回{HelloMessage}

因此替换

{back}

带

<Back />

你应该好好去

Answer 2

您已宣布ReactClass，但您 - 您必须将其变为ReactElement：

const Back = (props) => <BackButton forcedBackUrl={props.forcedBackUrl} />

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

Answer 3

您需要将道具注入组件

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>
             )
        }

    }

反应无状态组件不起作用

3 个答案: