ten szablon jest niezdefiniowany w metodzie

Question

Próbuję użyć tej wtyczki w moim projekcie https://github.com/rt2zz/react-native-drawer. Mógłbym poprawnie uruchomić ten przykład, ale mając problem z jego integracją.

Dostaję błąd w metodzie openDrawer. "Nie można odczytać szuflady właściwości nieokreślonej"

Zgaduję, że nie definiuję i nie używam klasy w prawidłowy sposób, tak jak powinno być (jestem nowy w javascript OOP), ponieważ w przykładzie używam React.createClass({ w przeciwieństwie do mojego jako rozszerzenie komponentu i mieć konstruktora.

Ważne kody z mojej klasy są następujące.

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 są

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

Myślę, że najlepiej będzie, jeśli wrócisz do korzystania createClass. Sposób tworzenia klas (extend) ES6 ma kilka wad w stosunku do klasy createClass: metody są niezwiązane (tj. "To" niekoniecznie wskazuje na obiekt), nie można również używać miksów, które są całkiem użyteczne. Niezwiązane metody to problem, którego doświadczasz. Można też obejść go w przypadku gdy masz kontrolę nad miejscem, gdzie metoda jest wywoływana i związania metodę (poszukaj sposobu wiązania w javascript na przykład tutaj: http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)

Answer 2

istnieje lepszy sposób niż oddanie this.openDrawer = this.openDrawer.bind(this) w konstruktorze zadeklarować metodę openDrawer z funkcją strzałkami:

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

Answer 3

Wystarczy, aby było jasne dla wszystkich, podczas korzystania ES6 class (zamiast React.createClass) trzeba powiązać metody do this w konstruktorze.

przykład

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

Uwaga: Myślałem, że chciałbym dodać tę odpowiedź od odpowiedzi, które zostały oznaczone jako poprawnych rozmów o wracając do React.createClass. Zostało to również wspomniane w komentarzach, ale nie całkiem jasne.