获取子组件的状态

我正在使用react-draggabe。我喜欢将功能添加到子组件的想法，方法是将其包装到另一个组件中，如<Draggable>。这个组件管理自己的状态很酷。这样我就不必关心任何事情。获取子组件的状态

但是：我需要在事件发生时获取拖动元素的当前位置（例如，用户单击另一个子组件中的某个按钮）。我知道我可以使用onStop处理程序并在父elemet的状态中保存新位置。但这是一个问题：我复制可拖动组件的状态，因为我也将它保存在父项中。我不想那样做。

这样做的反应方式是什么？
我是新来的rect和这个想法，所以我会感谢一个很好的解释。

来源

2016-08-24 Fuzzyma

你可以用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从它们的父组件访问此值。

来源

2016-08-24 15:58:03

看起来像父母 - >孩子关系的一个很好的解决方案，但是当你有父母 - >孙子和更深的时候会变得复杂。但是：这以优雅的方式解决了我的问题。谢谢！ – Fuzzyma

对于这些更复杂的场景，我想你会想使用状态管理库，如Redux或Mobx。 – AMilassin

是的，既然你提到你不需要在组件树中传递太深的数据，我建议你使用最简单的解决方案。如果事情变得复杂，你可以使用商店或“上下文”（不推荐，这是一个实验性功能）。 –

获取子组件的状态

回答

相关问题