Phản ứng this.prop truy cập Native từ bên trong chức năng

Question

Tôi có đoạn mã sau:

module.exports = class Menu extends Component { 

    about() { 
     this.props.nav.push({ 
      component: TestView, 
      title: 'Test View', 
     }); 
    } 

    render() { 
     return (
      <ScrollView 
       scrollsToTop={false} 
       style={styles.menu} 
       navigator={this.props.nav}> 
       <View style={styles.logoContainer}> 
        <Image 
         style={styles.logo} 
         source={{ uri, }}/> 
       </View> 

       <Text onPress={this.about} style={styles.item}>About</Text> 
       <Text style={styles.item}>Account</Text> 
      </ScrollView> 
     ); 
    } 
}; 

tôi tiếp tục nhận được thông báo lỗi:

"undefined is not an object ("evaluating this.props.nav") 

khi "onPress" gọi là "this.about". Tôi đặt một console.log trong hàm render và tôi có thể thấy rằng this.props.nav chứa một giá trị. Vấn đề xảy ra trong hàm about() và tôi không chắc chắn tại sao.

Mọi đề xuất sẽ tuyệt vời?

Cảm ơn

Answer 1

tôi không thể chắc chắn, nhưng điều này có vẻ như một vấn đề Javascript this ràng buộc đối với tôi. Trong các thành phần ReactJS được định nghĩa với cú pháp lớp ES6, hãy làm not automatically bindthis, vì vậy bạn đang bị một số Javascript bắt buộc bởi rules that vary the value of this tùy thuộc vào cách gọi hàm.

Bạn có thể cần phải sử dụng một cách rõ ràng .bind khi thiết handler nút của bạn:

<Text onPress={this.about.bind(this)} style={styles.item}>About</Text> 

Vì vậy mà this trong about() chức năng sẽ được giống như các this trong render() chức năng mà bạn thiết lập xử lý.

Tôi tìm thấy a repo cho thấy các phương pháp khác để giải quyết cùng một vấn đề, như ràng buộc trong một hàm tạo hoặc sử dụng "Fat-arrow" functions cho trình xử lý của bạn.

Trải nghiệm của tôi là sử dụng React cho web và tôi không chắc liệu React Native có khác biệt trong lĩnh vực này hay không.

Answer 2

Bạn cũng có thể liên kết lại bản khai báo phương thức để không cần phải nhớ gọi .bind(this) trong JSX của mình. Điều này rất hữu ích nếu bạn có nhiều nút gọi cùng chức năng.

Ví dụ:

class Menu extends Component { 
    constructor(props) { 
     super(props); 
     // Replace instance method with a new 'bound' version 
     this.about = this.about.bind(this); 
    } 

// Elsewhere in JSX you don't need to remember to call .bind(this) 
<Text onPress={this.about} style={styles.item}>About</Text>