Reaktif olmayan dünya react bileşenleri ile etkileşim

Question

Zaten yoğun bir şekilde KnockoutJS kullanan bir uygulama var. Charting için ReactJS'yi kullanmayı planlıyoruz. ReactJS ile kolayca basit grafikler oluşturabiliyoruz. Yapmam gereken sorulardan biri, React olmayan bir dünyadan bu React grafikleriyle nasıl etkileşimde bulunabilirim? Bir örnek vereyim. Diyelim ki bir çubuk grafikte React bileşeni var ve başlangıçta grafikleri eksenlerle oluşturmak ve böylece aşağıdakini yapmak istiyorsunuz.

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

Şimdi olmayan bir tepki dünyada ve eksenleri gizlemek istediğiniz düğmeyi tıklamak üzerinde bulunan bir düğme var düşünelim. Bunu nasıl yapabilirim? BarChart bileşeninde dışarıdan çağrılabilen bir kamu yöntemini ortaya çıkarabilir miyim? Eks.

,

const BarChart = React.createClass({ 

    .... 

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

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

Ama eksenleri bir aksesuar devlet değildir ve bu yüzden bile biz prop hakkını değiştiremezsiniz bir kamu yöntem maruz? Bu şeylerle nasıl başa çıkabiliriz? Reaksiyona girmeyen bir dünyadan React bileşenleri ile nasıl etkileşimde bulunabiliriz?

Answer 1

Sadece işlevi göstermeye ve işlevi dışarıdan çağırmaya hakkınız var. Eksenleri durum satırında 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);