Phản ứng chỉ gắn kết Các phương pháp thành phần cho điều này - làm việc xung quanh?

Question

Có cách nào để tránh lò hơi khi sử dụng ES6 với phản ứng 0.14 không?

Cho đến bây giờ, tôi không phải lo lắng về chức năng của mình bị ràng buộc vào số Component mà tôi đã tạo nhưng điều đó không còn nữa (tại sao?!?) Và thành phần chỉ bị ràng buộc với lớp học tối thiểu Component Tôi hiểu lỗi chính xác).

Vì vậy, những gì tôi thực sự cần phải làm mỗi khi tôi tạo ra một lớp mới là thêm mã này vào các nhà xây dựng:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    this.newFunction = this.newFunction.bind(this); 
    } 

    newFunction(){ 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

Vì vậy, nếu tôi wont ràng buộc newFunction nó sẽ thất bại (không đạo cụ, tiểu bang hoặc bất cứ điều gì).

Có cách nào để giải quyết vấn đề này không?

Answer 1

Từ React documentation:

Không Autobinding

Phương pháp theo ngữ nghĩa tương tự như lớp ES6 thường xuyên, có nghĩa là họ không tự động liên kết này với ví dụ. Bạn sẽ phải sử dụng rõ ràng .bind (this) hoặc arrow functions =>.

Vì vậy, không có cách nào tự động ràng buộc tất cả các phương thức mới trong 0,14. Tuy nhiên, như các tài liệu cho thấy, bạn có thể:

1) sử dụng chức năng mũi tên (Tuy nhiên, nếu bạn đang sử dụng Babel, bạn cần giai đoạn 0) :

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction =() => { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

2) bạn có thể ràng buộc tại chỗ:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction.bind(this)}>Click</button> 
    } 
} 

3) bạn có thể sử dụng một ar hàng chức năng tại chỗ (mà là giống như một ràng buộc):

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={() => this.newFunction()}>Click</button> 
    } 
} 

tôi có xu hướng sử dụng số 2 & 3 nếu tôi chỉ có một phương pháp 1-2. Số 1 là tốt, nhưng bạn phải nhớ cú pháp cho mọi định nghĩa phương thức. Nếu tôi có nhiều phương pháp, tôi có khuynh hướng ràng buộc trong hàm tạo.