React ES 6クラスrefs

Question

私は反応ネイティブで非常に新しいですし、古い反応のソースコードをES 6クラスを使用して反応させようとしましたが、 '未定義の'プロパティ 'close'を読み取ることができません。 closeDrawerのthis.refs.drawerが定義されていない理由は誰でも助けてくれますか？

closeDrawer =() => { 
    applicationActions.setDrawerStatus(false); 
    this.refs.drawer.close(); 
} 

openDrawer =() => { 
    applicationActions.setDrawerStatus(true); 
    this.refs.drawer.open() 
} 

setDrawerState(value) { 
    this.setState({ isDrawerOpened: value }); 
} 

render() { 
    return (
    <Drawer ref="drawer" 
     type="static" 
     openDrawerOffset={DRAWER_OFFSET} 
     panOpenMask={.5} 
     onOpen={() => this.setDrawerState(true).bind(this)} 
     onClose={() => this.setDrawerState(false).bind(this)} 
     content={<DrawerScene closeDrawer={this.closeDrawer().bind(this)} />} > 

     <MainView 
      drawerStatus={this.isDrawerOpened} 
      closeDrawer={this.closeDrawer().bind(this)} 
      openDrawer={this.openDrawer().bind(this)} 
     /> 
    </Drawer> 
); 
} 

よろしく

Answer 1

EDITあなたは、コンポーネントのメンバ関数の矢印の機能を使用していたことに私は気づいていなかったので、あなたがbindにそれらを必要としません。ただし、その他の問題がありました。

これは拘束力のある問題です。これは動作するはずです：

問題は、関数呼び出しの結果にバインドを適用していることです。たとえば、this.setDrawerState(true).bind(this)を実行すると、関数が呼び出され、適切な値が返され、bindが適用されます。これにより通常はエラーが発生しますが、まだセットアップされていないrefにアクセスしようとしています（その前にすべてのpropの値を評価してから新しいコンポーネントに渡す必要がありますコンポーネントがインスタンス化される前に関数が呼び出されます）。

bindについてもう少し知っています。それは関数オブジェクトのプロパティなので、その関数への参照（この場合はその名前）からアクセスする必要があります。 bindの結果は、元のものと同じ動作をし、新しいthisの値または渡した他のパラメータのために保存された新しい関数です。

Answer 2

は文字列ではなく、このように参照を設定してください：

drawer = null; 
closeDrawer =() => { 
    applicationActions.setDrawerStatus(false); 
    this.drawer.close(); 
} 

openDrawer =() => { 
    applicationActions.setDrawerStatus(true); 
    this.drawer.open() 
} 

setDrawerState(value) { 
    this.setState({ isDrawerOpened: value }); 
} 

render() { 
    return (
    <Drawer ref={((component)=> this.drawer=component)} 
     type="static" 
     openDrawerOffset={DRAWER_OFFSET} 
     panOpenMask={.5} 
     onOpen={() => this.setDrawerState(true).bind(this)} 
     onClose={() => this.setDrawerState(false).bind(this)} 
     content={<DrawerScene closeDrawer={this.closeDrawer().bind(this)} />} > 

     <MainView 
      drawerStatus={this.isDrawerOpened} 
      closeDrawer={this.closeDrawer().bind(this)} 
      openDrawer={this.openDrawer().bind(this)} 
     /> 
    </Drawer> 
); 
}