Question

希望您在这方面得到一些帮助。为了澄清，我仍在用Reactjs教育自己。

我有两个组件A和B。我需要从A访问B的状态。这可能吗？

var A = React.createClass({
  getInitialState(){
   return {foo: 'bar'}
  },

 ...
});

var B = React.createClass({
  getInitialState(){
   return {x: 'y'}
  },

 render(){
  var a = <A />;
  var b = a.state.foo; // This was just a guess but I dont understand the docs for something like this.
  return({b});
 }
});

在B的组件中，如何呈现A的状态，即bar？我希望有两个独立的组件。

我一直在阅读有关ref的内容，但仍然无法弄清楚如何通过参考完成我想要的内容。

反应版本：0.14.3

Answer 1

让我们看一下州和道具的目的。组件的状态完全在组件内部。它永远不会在组件外部知道，可能/不会传递给子组件（作为道具）。 另一方面，道具是明确的公开，仅由组件使用。它们应该是将信息传递给组件的唯一方法。

在设计组件时，请始终考虑到多个组件所需的任何数据都不能是其中任何一个组件的状态。 React鼓励单向数据流并跨越不同组件访问状态，从而使您的组件难以推理。

在你的情况下，既然B需要知道A有的一些信息，我建议像这样 -

A在适当的时间将此信息发布到Flux商店。
B已订阅同一个Flux商店，会收到此通知信息和更新本身。

Answer 2

@HazardousS和@DERIIIFranz错了。

回复@HazardousS，仅仅是因为您需要从一个组件到另一个组件的数据并不能保证将Flux应用到您的应用程序中。你总是想使用道具，然后陈述，然后......通量。这里的教训是，＆＃34;如果需要，只使用Flux。＆＃34;早些时候曾在React工作的Facebook员工Pete Hunt上周发表了这篇文章。它反映了React社区中的大量炒作和错误信息：https://github.com/petehunt/react-howto

关于使用Context的@DERIIIFranz：请勿使用上下文。如果您只是点击链接，Facebook文档甚至会对自己的功能发出警告。 React docs做的事情很可爱......他们给你带来很多绳索让自己挂起来。

您似乎尚未完成React教程，因为您已经在询问有关数据消息传递的基本问题。如果你想在React中取得成功，这是你需要从根本上理解的东西。花点时间，在官方反应文档页面上做教程，熟悉＆＃34;反应方式＆＃34;做事。这很奇怪，很奇怪......但是如果你扣下来并且在时间下沉以学习基础知识的话就会点击。

Answer 3

我们必须考虑如何在this.state.somevariable内提供<A/> 。

如果<A/>和是共同<Parent/>的兄弟姐妹，则父级可以为<A/>和更改此状态并传递更改后的状态作为孩子的this.props.statevariable。
如果可以是<A/>的孩子，则<A/>始终可以将this.state.statevariable作为props传递给。
如果您浏览Flux Architecture，则可以维护在variable内呈现所需的Stores，并在任意数量的组件中访问这些内容。

从另一个组件访问组件的状态

3 个答案: