Interacting with React components from a non-responsive world

Question

We have an application that already uses KnockoutJS extensively. For Charting, we plan to use ReactJS. We could easily create simple diagrams with ReactJS. One of the questions that puzzles me is how I can interact with these React cards from a non-React world. Let me give you an example. Say you have a React chart component, and first you want to display the chart with axes, and therefore you do as shown below.

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

Now let's assume that you have a button that exists in a world other than React, and with the button you want to hide the axes. How can i do this? Can I provide a public method in the BarChart component that can be called externally?

For instance,

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

But there is no recognition by the axes, and therefore even we publish a public method that we cannot change, right? Any ideas how we can handle these things? How can we interact with React components from a non-responsive world?

Answer 1

You are right, just expose the function and call the function from the outside. You can keep axes in state 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);