Interakcja z komponentami React z niereagującego świata

Question

Mamy aplikację, która już szeroko wykorzystuje KnockoutJS. Do tworzenia wykresów zamierzamy użyć ReactJS. Mogliśmy łatwo tworzyć proste wykresy za pomocą ReactJS. Jedno z pytań, które łamigłówka, w jaki sposób mogę wchodzić w interakcje z tymi wykresami reaktywnymi ze świata niereagującego. Pozwolę sobie podać przykład. Załóżmy, że masz komponent Reaktor na wykresie słupkowym i na początku chcesz renderować wykres za pomocą osi, a więc poniżej.

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

Teraz załóżmy, że masz przycisk, który istnieje w świecie nie reagują i na kliknięcie przycisku, który chcesz ukryć osie. Jak mogę to zrobić? Czy mogę wyświetlić publiczną metodę w komponencie BarChart, która może być wywołana z zewnątrz?

Dla ex.,

const BarChart = React.createClass({ 

    .... 

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

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

Ale osie to prop stan i tak nie możemy nawet narazić metodę publiczną nie możemy zmienić prop prawo? Wszelkie pomysły, jak możemy sobie z tym poradzić? Jak możemy współpracować z komponentami React ze świata, który nie reaguje?

Answer 1

Masz rację, po prostu ujawnij funkcję i wywołaj funkcję z zewnątrz. Możesz przechowywać osie w stanie w 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);