與來自非反應世界的React組件進行交互

我們已經有了一個已經廣泛使用KnockoutJS的應用程序。對於圖表，我們計劃使用ReactJS。我們可以使用ReactJS輕鬆構建簡單的圖表。其中一個難題是我如何與來自非React世界的React圖表交互。讓我舉個例子。假設您有一個條形圖React組件，並且最初您想要使用座標軸渲染圖表，所以您可以像下面這樣做。與來自非反應世界的React組件進行交互

ReactDOM.render(<BarChart axes={true} data={data} {...lot of other props} />, mountNode);

現在讓我們假設你有一個存在於非React世界中的按鈕，並且點擊你想隱藏軸的按鈕。我怎樣才能做到這一點？我能否在BarChart組件中公開可以從外部調用的方法？

對於離，

const BarChart = React.createClass({ 

    .... 

    showAxes(show) { 
    //... 
    } 
}); 

var barChart = ReactDOM.render(<BarChart axes={true} data={data} {...lot of other props} />, mountNode); 
barChart.showAxes(false);

但軸是一個道具不是國家，因此即使我們揭露我們不能改變支柱權的公共方法？任何想法我們如何處理這些事情？我們如何與來自無反應世界的React組件交互？

來源

2016-07-08 VJAI

你是對的只是暴露了功能，並從外部調用功能。您可以將軸保存在getinitialState狀態

const BarChart = React.createClass({ 
    getInitialState(){ 
    return { 
     axes: this.props.axes 
    } 
    } 
    .... 

    showAxes(show) { 
    //... 
    this.setState({ 
     axis: show 
    }) 
    } 
}); 

var barChart = ReactDOM.render(<BarChart axes={true} data={data} {...lot of other props} />, mountNode); 
barChart.showAxes(false);

來源

2016-07-08 06:41:42

與來自非反應世界的React組件進行交互

回答

相關問題