javascript - ReactJS向子组件添加回调函数

我想将回调附加到已创建的react组件上，这可能吗？

这是我的包装器类，我想从现有子级中调用callbackToCall：

import React from 'react';
class MyComponent extends React.Component {

    callbackToCall() {
        console.log("callback called.");
    }

    render() {
        const {children} = this.props;
        // Here I want to attach the callback to call
        // E.g. children.props.callback = callbackToCall;
        return (
        <div>
            MyStuff
            {children};
        </div>
        );
    }
}

子类，它没有对容器类的任何回调：

import React from 'react';
class Child extends React.Component {

    render() {
        return <button onClick={this.props.callback}>Click me</button>
    }
}

这是我组件的调用，在这里我不知道如何引用回调：

<MyComponent>
    <Child /* Here I cannot set the callback callback={...callbackToCall}*/ />
</MyComponent>

最佳答案

假设MyComponent是一个接受唯一孩子并应该为其提供callback道具的包装器，则应为：

class MyComponent extends React.Component {
    ...
    render() {
        const child = React.cloneElement(
          React.Children.only(this.props.children),
          { callback: this.callbackToCall }
        );

        return (
          <div>
            MyStuff
            {child};
          </div>
        );
    }
}

或者，可以通过prop向MyComponent提供组件而不是元素，例如：

class MyComponent extends React.Component {
    ...
    render() {
        return (
          <div>
            MyStuff
            <this.props.component callback={this.callbackToCall}/>
            {this.props.children};
          </div>
        );
    }
}

这样，MyComponent可以另外接受用于其他用途的子级，例如<MyComponent component={Child}>...</MyComponent>。

关于javascript - ReactJS向子组件添加回调函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54060474/