Interazione con componenti React dal mondo non reattivo

Question

Abbiamo un'applicazione che utilizza già ampiamente KnockoutJS. Per la creazione di grafici, stiamo pianificando di utilizzare ReactJS. Potremmo costruire facilmente grafici semplici con ReactJS. Una delle domande che mi imbarazza come posso interagire con questa tabella di React da un mondo non-React. Lasciatemi fare un esempio. Supponiamo che tu abbia un grafico a barre. Reagisci il componente e inizialmente vuoi renderizzare il grafico con gli assi e così fai sotto.

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

Ora supponiamo che avete un pulsante che esiste in un mondo non reagire e al click del pulsante che si desidera nascondere gli assi. Come lo posso fare? Posso esporre un metodo pubblico nel componente BarChart che può essere richiamato dall'esterno?

Per es.,

const BarChart = React.createClass({ 

    .... 

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

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

Ma gli assi è un oggetto di scena non è stato e così anche noi esporre un metodo pubblico che non possiamo cambiare il diritto puntello? Qualche idea su come possiamo gestire queste cose? Come possiamo interagire con i componenti di React da un mondo non reattivo?

Answer 1

Hai appena esporre la funzione e chiamare la funzione dall'esterno. È possibile memorizzare gli assi nello stato in 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);