reactjs – 与来自非反应世界的React组件进行交互

我们已经广泛使用了KnockoutJS的应用程序.对于Charting,我们计划使用ReactJS.我们可以轻松地使用ReactJS构建简单的图表.困惑我的问题之一是如何与来自非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组件进行交互？

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);