将 react const 渲染为组件

Question

假设我有这个父母

const Parent = () => <ChildComponent foo={<Button>clic</Button>} />

为什么这段代码可以工作

class ChildComponent extends React.Component {
    render() {
        return (
            <div>
                {this.props.foo}
            </div>
        )
    }
}

但这段代码不会？

class ChildComponent extends React.Component {
    constructor(props) {
        super(props)
        const ParentButton = this.props.foo
    }
    render() {
        return (
            <div>
                <ParentButton />
            </div>
        )
    }
}

我需要类似于第二个示例的内容，以便向 ParentButton 添加一些事件。

我想让this example 使用类定义的组件

更新：

根据答案，我现在有了部分解决方案

class ChildComponent extends React.Component {
    constructor(props) {
        super(props)
        this.ParentButton = this.props.foo
    }
    render() {
        return (
            <div>
                {this.ParentButton}
            </div>
        )
    }
}

Answer 1

您没有将ParentButton 分配给ChildComponent。

您目前拥有的是一个浮动在构造函数中的const，因为const、let 和var 关键字是函数/块范围的。

this. ParentButton = this.props.foo 和简洁的 <this. ParentButton > 在你的渲染函数中会得到你想要的。