Question

我正在尝试扩展我通过合成“子类化”的组件的默认事件处理程序功能。

如果我有一个这样的简单组件：

export class Foo extends React.Component {
    doSomething() {
        // I want to do this first...
    }

    render() {
        return <Bar onClick="() => this.doSomething.bind(this)" />
    }
}

......我正试图通过作文来扩展它：

export class FancyFoo extends React.Component {
    doSomethingFancy() {
        // ...and do this second
    }

    render() {
        return <Foo onClick="() => this.doSomethingFancy.bind(this)" />
    }
}

如何在Foo之前确保Foo.doSomething之前执行SuperFoo.doSomethingFancy？我试过这样的方法：

export class Foo extends React.Component {

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

    doSomething() {
        // do the default thing
        console.log('here!');  // <-- never happens

        // if "subclass" provided a callback, call it next
        'function' === typeof this.props.onClick && this.props.onChange.apply(this, arguments);
    }

    render() {
        return (
            <Bar
                onClick={this.doSomething}
                {...this.props} />
        );
    }
}

...但在Foo.doSomething期间永远不会调用SuperFoo.doSomethingFancy。我是React的新手，假设我忽视了一些明显的东西。感谢

Answer 1

我通过在Foo.render方法中利用扩展对象解构来解决这个问题：

render() {

    // extract FancyFoo's onClick handler
    const {onClick, ...props} = this.props;

    // pass only remaining props to Bar constructor, override onClick
    return (
        <Bar
            onClick={this.doSomething}
            {...props} />
    );
}

...然后Foo的doSomething按预期工作：

doSomething() {
    // do the default thing
    // ...

    // this.props. onClick references FancyFoo's implementation 
    'function' === typeof this.props.onClick && this.props.onChange.apply(this, arguments);
}

现在执行Foo.doSomething，然后立即执行FancyFoo.doSomething。

在React中扩展组件事件处理程序道具

1 个答案: