如何在父反應組件中調用iScroll刷新方法？

我正在努力與iScroll結合reactJS currenlty。
此代碼示例是用打字稿編寫的。如何在父反應組件中調用iScroll刷新方法？

我創建了一個包裝類iScroll：

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 

var iScroll = require('iscroll');   
... 

    componentDidMount() { 
      this._initializeIScrollInstance(); 
      console.log(this); 
     } 

    _initializeIScrollInstance() { 
      setTimeout(() => { 
       let element = ReactDOM.findDOMNode(this); 
       const iScrollInstance = new iScroll(element, this.props.options); 
       this._iScrollInstance = iScrollInstance; 
      }, 100); 
     } 

    render() { 
       return (
        <div style={ this.props.style } > 
         { this.props.children } 
        </div> 
       ) 
      } 
     }

然後我用它像這樣在我的側邊欄類實例。

<ScrollWrapper> 
<SidebarMenu toggle={ this.toggle.bind(this) } /> 
</ScrollWrapper>

我面臨的問題是當我在側邊欄切換菜單。這意味着高度發生變化，所以我需要調用iScroll的刷新方法。
但我該如何做到這一點？
我可以在我的父組件中獲得_iScrollInstance嗎？

它可能保持我的側邊欄內的狀態，並將其作爲屬性傳遞給ScrollWrapper，並在componentReceiveProps中監視它。但這聽起來像是一個便宜的解決方案給我。
任何人都可能有更好的解決方案，這種問題？

來源

2015-10-19 datoml

基於您的代碼：

<ScrollWrapper> 
<SidebarMenu toggle={ this.toggle.bind(this) } /> 
</ScrollWrapper>

我看到子組件的動作（切換），需要做的父組件（滾動）的東西。這樣做的慣用方式是讓父組件爲父組件提供一個函數（回調函數），當孩子想要更改父項中的某些內容時，它會調用該函數。

注意：推薦的方法是使用flux ...但這是一個完整的其他主題（我使用查找redux）。

來源

2015-10-20 00:21:53 basarat

謝謝你的解釋。我也想過使用回調函數的方式，但我不知道如何在包裝器中傳遞它。我現在採取了與REDX的方式，它的作品完美。減少正常的Facebook流量有什麼好處嗎？ – datoml

它非常易於使用。並且與TypeScript一起使用也很好：https：//github.com/basarat/tsb/blob/master/docs/contributing/REDUX.md – basarat

如何在父反應組件中調用iScroll刷新方法？

回答

相關問題