Unikaj .bind w ES6 (7?) Z Babel

Question

mam to w moim JSX:

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} /> 

jednak przysięgam widziałem jakiś fanciness negować potrzebę .bind przechodząc metod wywołania zwrotnego w dół dziecko Reaguj na składniki, czy mam rację?

Answer 1

Można użyć arrow function w połączeniu z inicjalizacją właściwości.

class Component extends React.Component { 
    handleClick =() => { 
    console.log(this.props); 
    } 

    render() { 
    return <div onClick={this.handleClick} /> 
    } 
} 

Ponieważ funkcja strzałka jest zadeklarowana w zakresie konstruktora, a ponieważ funkcje strzałek utrzymać this z ich uznającej zakresie, to wszystko działa. Minusem jest to, że nie będą to funkcje na prototypie, wszystkie zostaną odtworzone z każdym komponentem. Nie jest to jednak żadną wadą, ponieważ bind powoduje to samo.

Answer 2

Można powiązać wszystkie funkcje komponentu używając składni klasy ES2015 z tej funkcji autoBind pomocnika:

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

    onOptionSelect() { 
    // do stuff 
    } 

    render() { 
    return <Options options={options} onOptionSelect={this.onOptionSelect} />; 
    } 
} 

function autoBind(obj) { 
    getAllMethods(obj.constructor.prototype) 
     .forEach(mtd => { 
      obj[mtd] = obj[mtd].bind(obj); 
     }); 
} 

function getAllMethods(obj) { 
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function"); 
} 

Zauważ, że Component nie trzeba używać metody zdefiniowane funkcje strzałek.