этот refs становится неопределенным в методе

Question

Я пытаюсь использовать этот плагин в своем проекте https://github.com/rt2zz/react-native-drawer. Я мог бы запустить пример правильно, но проблема с его интеграцией.

Я получаю ошибку в методе openDrawer. «Не удается прочитать ящик свойств неопределенного»

Я предполагаю, что я не определяю и не использую класс правильно, как должно быть (я новичок в javascript OOP), как в примере, он использует React.createClass({, в отличие от моего как расширяющий компонент и имеющий конструктор.

Релевантные коды моего класса следующие.

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() { 
     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

Я думаю, что лучше, если вы вернетесь к использованию createClass. ES6 способ создания классов (расширений) имеет несколько недостатков по сравнению с createClass: методы не связаны (т. Е. «Это» не обязательно указывает на объект), также вы не можете использовать миксины, которые очень полезны. Несвязанные методы - это проблема, с которой вы сталкиваетесь. Вы также можете обойти его в случае, если у вас есть контроль над местом, где метод называется и связать метод (ищет метод связывания в JavaScript, например, здесь: http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)

Answer 2

Существует лучший способ, чем положить this.openDrawer = this.openDrawer.bind(this) в конструкторе Объявите метод OpenDrawer с функцией стрелки:

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

Answer 3

Просто, чтобы сделать его более понятным для всех, при использовании ES6 class (вместо React.createClass) вы должны связать методы к this в конструкторе.

пример

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 
    } 
} 

Примечание: Я думал, что я хотел бы добавить этот ответ, так как ответ, помеченный как правильные разговоры о возвращаясь назад к React.createClass. Также он упоминается в комментариях, но не совсем ясен.