Tránh .bind trong ES6 (7?) Với Babel

Question

Tôi có điều này trong JSX tôi:

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

Tuy nhiên, tôi thề tôi đã nhìn thấy một số fanciness để phủ nhận sự cần thiết của .bind khi đi qua các phương thức callback xuống con Các thành phần phản ứng, tôi có đúng không?

Answer 1

Bạn có thể sử dụng số arrow function kết hợp với khởi tạo thuộc tính.

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

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

Bởi vì mũi tên hàm được khai báo trong phạm vi của các nhà xây dựng, và bởi vì mũi tên chức năng duy trì this từ phạm vi tuyên bố của họ, tất cả các công trình. Nhược điểm ở đây là những wont được chức năng trên nguyên mẫu, tất cả chúng sẽ được tái tạo với mỗi thành phần. Tuy nhiên, đây không phải là một nhược điểm kể từ khi kết quả bind trong cùng một điều.

Answer 2

Bạn có thể ràng buộc tất cả các chức năng của một thành phần sử dụng cú pháp lớp ES2015 với chức năng autoBind helper này:

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"); 
} 

Lưu ý rằng Component không nhất thiết phải sử dụng phương pháp xác định với các chức năng mũi tên.