Событие доступа к компоненту, который передается как проп

Question

Я передаю компонент реакции как опору ребенку. Этот компонент имеет событие. В дочернем компоненте я хочу получить доступ к этому событию и связать его с методом внутри дочернего элемента. Как я могу это сделать?

Я часто использую семантический пользовательский интерфейс реагирует на модал следующим образом

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        }
    }    

    handleOpen = () => this.setState({ modalOpen: true })

    handleClose = () => this.setState({ modalOpen: false })

    render(){
        return(
            <Modal 
                onClose={this.handleClose}
                open={this.state.modalOpen}
                trigger={<Button onClick={this.handleOpen}>Gandalf</Button>}>
                <Modal.Header>Balrog</Modal.Header>
                <Modal.Content>
                    <h1>You shall not pass!</h1>
                    {/* 
                    Some form that closes Modal on success
                    onSuccess : this.handleClose 
                    */}
                    <Button onClick={this.handleClose}>Grrrrr</Button>
                </Modal.Content>
            </Modal>
        )
    }
}

export default Example

Теперь я хочу сделать его многоразовым

import React, { Component } from 'react'
import { Modal } from 'semantic-ui-react'

class ReusableModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        }
    }    

    handleOpen = () => this.setState({ modalOpen: true })

    handleClose = () => this.setState({ modalOpen: false })

    render(){
        return(
            <Modal 
                onClose={() => this.handleClose}
                open={this.state.modalOpen}
                {/* 
                    How to access onClick event on trigger prop content ?  
                    this.prop.trigger can be a Button or a Menu.Item
                */}
                {...this.props}>
                {this.props.children}
            </Modal>
        )
    }
}

Как получить доступ к компоненту поддержки триггера и связать его событие onClick с методом handleOpen?

Редактировать:

если быть более точным, вот что я ищу

<ChildComponent trigger={<Button>This button should fire a function defined in child component</Button>} />


ChildComponent extends Component {
    functionToCall = () => { console.log('hello') }
    // I would like to :
    // let myButton = this.props.trigger
    // myButton.onClick = functionToCall
}

Answer 1

Ключ здесь клонировать элемент

ChildComponent extends Component {
    functionToCall = () => { console.log('hello') }

    this.Trigger = React.cloneElement(
        this.props.trigger,
        { onClick: this.functionToCall }
    )   
}

Answer 2

В React данные передаются от родителя к потомку. Если есть несколько дочерних компонентов, у которых есть события, которые должны инициировать изменения в родительском компоненте, вы должны запустить функцию обратного вызова в дочернем компоненте.

Родительский компонент:

handleOpen = () => { // do something }
(...)
<childComponent onClickCallback={this.handleOpen}

А в дочернем компоненте:

<button onClick={this.props.onClickCallback}> Click to close</button>

Передайте this.handleOpen как реквизит и вызовите его как реквизит в дочернем компоненте, и он вызовет функцию в родительском компоненте, где вы можете обрабатывать данные так, как вам удобно.

Это то, что вы просили?