refs này đang nhận được không xác định trong phương pháp

Question

Tôi đang cố gắng sử dụng plugin này trong dự án của tôi https://github.com/rt2zz/react-native-drawer. Tôi có thể chạy ví dụ đúng cách nhưng gặp sự cố khi tích hợp nó.

Tôi gặp lỗi trong phương thức openDrawer. "Không thể đọc ngăn thuộc tính không xác định"

Tôi đoán rằng tôi không xác định và sử dụng lớp theo đúng cách như (tôi mới thành javascript OOP) như ví dụ: sử dụng React.createClass({ không giống như của tôi như mở rộng Thành phần và có hàm tạo.

Các mã có liên quan từ lớp học của tôi như sau.

class Search extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isLoading: true, 
      dataSource: new ListView.DataSource({ 
       rowHasChanged: (row1, row2) => row1 !== row2 
      }) 
     }; 
    } 

    openDrawer(){ 
     this.refs.drawer.open() 
    } 

    getInitialState(){ 
     return { 
      drawerType: 'overlay', 

     } 
    } 

Render là

render() { 
     if (this.state.isLoading) { 
      return this.renderLoadingView(); 
     } 

     var controlPanel = <MyControlPanel closeDrawer={() => {this.refs.drawer.close()}} /> 

     return (


      <View> 
       <View style={styles.topBar}> 

        <Drawer 
         ref="drawer" 
         > 
         <MyMainView 
          /> 
        </Drawer> 

        <Text style={styles.topBarMenu}>&#9776;</Text> 
        <Text style={styles.topBarTitle}>เงินปันผล</Text> 
        <Text style={styles.topBarRight}></Text> 
       </View> 

Answer 1

Tôi nghĩ đó là tốt nhất nếu bạn quay trở lại sử dụng createClass. Cách tạo lớp ES6 (mở rộng) có ít nhược điểm hơn createClass: các phương thức không bị ràng buộc (tức là "điều này" không nhất thiết trỏ đến đối tượng), bạn cũng không thể sử dụng mixin khá hữu ích. Các phương pháp không liên kết là vấn đề bạn đang gặp phải. Bạn cũng có thể workaround nó trong trường hợp bạn có thể kiểm soát nơi phương pháp này được gọi và ràng buộc phương pháp (tìm kiếm phương pháp ràng buộc trong javascript ví dụ ở đây: http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)

Answer 2

Có một cách tốt hơn so với đặt this.openDrawer = this.openDrawer.bind(this) trong constructor khai báo phương pháp openDrawer với mũi tên hàm:

openDrawer =() => { 
    this.refs.drawer.open() 
} 

Answer 3

Chỉ cần để làm cho nó rõ ràng cho tất cả mọi người, khi sử dụng ES6 class (thay vì React.createClass) bạn phải ràng buộc phương pháp để this trong constructor.

dụ

class Search extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      isLoading: true, 
      dataSource: new ListView.DataSource({ 
       rowHasChanged: (row1, row2) => row1 !== row2 
      }) 
     }; 

     this.openDrawer = this.openDrawer.bind(this); //bind this to openDrawer 
    } 
} 

Lưu ý: Tôi nghĩ tôi sẽ thêm câu trả lời này kể từ khi câu trả lời được đánh dấu là các cuộc đàm phán chính xác về quay trở lại React.createClass. Ngoài ra nó được đề cập trong các ý kiến ​​nhưng không hoàn toàn rõ ràng.