在React中擴展組件事件處理程序道具

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 。