отреагировать 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.

Я бы хотел, чтобы этот пример работал с определенным классом компонентом

Обновление:

На основании ответа у меня теперь есть частичное решение

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 > в вашей функции рендера, вы получите то, что вы ищете.