可重複使用的鹼反應成分結合的問題與ES6

Question

創建鹼反應組件繼承：

import { Component } from 'react'; 

class BaseComponent extends Component { 
    constructor(props) { 
     super(props); 
    } 

    _bindProps(...methods) { 
     return methods.map(method => this[method].bind(this)) 
    } 
} 

export default BaseComponent; 

而且我的孩子組成：

class SomeChild extends BaseComponent { 

    constructor(props) { 
     super(props); 
    } 

    foo() { 

    } 

    render() { 
     const props = this._bindProps('foo'); 
     <Child {...props} /> 
    } 
} 

但是，我上線return methods.map(method => this[method].bind(this))收到Cannot read property 'bind' of undefined 。我怎樣才能做到這一點，即。將方法從父組件傳遞給子組件，並且當從子組件調用子組件時，請將值引用父組件。

Answer 1

class SomeChild extends BaseComponent { 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    foo =() => { 
 

 
    } 
 

 
    render() { 
 
     <Child foo={this.foo} /> 
 
    } 
 
}

如果你只是做了BaseComponent來（這個）綁定的方法和使用ES6會比較簡單，只是用箭頭功能爲你的方法。

Answer 2

Janaka是正確的使用箭頭功能，但也有你的_bindProps執行問題。它返回一個綁定函數的數組，但你需要返回一個屬性的key/val對象。更新您的_bindProps定義：

_bindProps(obj) { 
    Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this)); 
    return obj; 
} 

而且與對象調用它的伎倆：

class BaseComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    _bindProps(obj) { 
    Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this)); 
    return obj; 
    } 
} 

class SomeChild extends BaseComponent { 

    constructor(props) { 
    super(props); 
    this.name = 'Jack' 
    } 

    foo() { 
    return this.name; 
    } 

    render() { 
    const props = this._bindProps({ 
     foo: this.foo, 
    }); 
    console.log('props', props); 
    return <Child {...props} /> 
    } 
} 

你可以整理上面了一點點，但，它現在做正確的事情，如果你打電話this.props.foo()在子組件中，您將返回Jack。

我很想知道爲什麼你這樣做，但呢？這不是我通常不得不在任何時候做的事情。