React ES 6類參考

Question

我是非常新的反應原生，我試圖重構一個源代碼從舊的反應到使用ES 6類反應，但我得到一個錯誤'不能讀取屬性'關閉'未定義'。任何人都可以幫助我爲什麼在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

編輯我沒有注意到，你是在組件的成員函數使用箭頭功能，讓您不必bind他們。還有一些其他問題，雖然

這是一個綁定問題。這應該工作：

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)} 
     onClose={() => this.setDrawerState(false)} 
     content={<DrawerScene closeDrawer={this.closeDrawer} />} > 

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

您的代碼的問題是，您正在應用綁定到函數調用的結果。例如，當您執行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> 
); 
}