reactjs - 获取子组件的状态

Question

我正在使用react-draggabe 。我喜欢通过将子组件包装到另一个类似 <Draggable> 中来向子组件添加功能的想法。做。这个组件管理自己的状态，这很酷。这样我就不用关心任何事情了。

但是:当事件发生时(例如，用户单击另一个子组件中某处的按钮)，我需要获取拖动元素的当前位置。我知道我可以使用 onStop-handler 并将新位置保存在父元素的状态中。但这是一个问题:我复制了可拖动组件的状态，因为我还将它保存在父级中。我不想那样做。

这样做的 react 方式是什么？
我是刚接触这个想法的新手，所以我将感谢您提供一个很好的解释。

Answer 1

您可以使用refs来做到这一点:

var Foo = React.createClass({       
  componentDidMount() {
    console.log(this.refs.bar.baz) // "qux"  
  },
  render() {
    return (
      <div>
        <Bar ref="bar"  />
      </div>
    );      
  }
});



var Bar = React.createClass({
  getInitialState: function() {
    return {baz: 'qux'};
  }
});

我做了一个fiddle为您提供一个从子组件访问状态的示例。其中一个组件递增一个值，它的同级组件渲染该值，并通过其父组件的 props/refs 访问该值。