与来自非反应世界的React组件交互

Question

我们已经广泛使用了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组件进行交互？

Answer 1

你是对的，只需暴露函数并从外部调用函数。 您可以在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);