Question

我想将回调附加到已创建的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>

Answer 1

鉴于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>
        ); 
    }
}

或者，MyComponent可以通过道具提供 component 而不是 element ，例如：

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

通过这种方式，MyComponent可以接受其他目的的孩子，例如<MyComponent component={Child}>...</MyComponent>。

Answer 2

从react.js文档中，

您可以尝试这样的事情您将需要调用构造函数和super来初始化状态或绑定方法。否则this.props将返回undefined。

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

constructor(props){
  super(props);
  this.callbackToCall = this.callbackToCall.bind(this);
}

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

render() {
    const {children} = this.props;


    // Call the function using
    {this.callbackToCall}

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

确保将函数作为参考传递，例如{this.callbackToCall}而不是{this.callbackToCall（）} 希望这会有所帮助

ReactJS向子组件添加回调函数

2 个答案: