Question

假设我有以下代码：

tox.ini

-

<View>
    <ComponentA>
        <TouchableHighLight onPress={this.refs.componentB.foo.bind(this)}><Text>Hey</Text></TouchableHighLight>
    </ComponentA>
    <ComponentB ref='componentB'>
    ....
    </ComponentB>
</View>

当我尝试在ComponentA中使用它时，componentB的ref将是未定义的。我猜它是因为我在分配引用之前尝试使用它。

解决这个问题的最佳方法是什么？

我可以拥有父组件中的所有函数，但是如果我不填充IMO应该包含在子组件中的函数，它将最终成为一个巨大的文件。

Answer 1

您可以将onPress - 处理程序包装在函数中：

<TouchableHighLight onPress={() => this.refs.componentB.foo()}>

Answer 2

我没有看到在父组件中使用这些共享函数的问题，当其中一个子组件发生某些事情时，使用props调用它们。这实际上是一种鼓励的React模式，因为您可以让您的孩子组件更容易测试。如果你让ChildA知道ChildB，你就是在耦合它们，而不是让父母只是协调它们。

另见： https://facebook.github.io/react/docs/more-about-refs.html#cautions

如果您还没有使用React编写多个应用程序，那么您的第一个倾向通常是尝试使用refs来实现＆＃34;使事情发生。在你的应用程序中如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常情况下，很明显，适当的地方是拥有＆＃34;该状态在层次结构中处于更高级别。将状态放置在那里通常会消除任何使用refs以使事情发生的愿望＆＃34; - 相反，数据流通常会实现您的目标。

Answer 3

您无法从<Component B>访问<Component A>中的任何方法。 这是设计性的，是故意做的，也是为了你自己的利益:) 最好坚持反应设计原则，而不是试图做出捷径。你肯定会后悔任何捷径。

BTW：ref是对DOM中已安装组件的引用，而不是对react组件的引用。所以我认为无论如何你都无法让它发挥作用。此外，我总是建议任何人不要使用refs（我从Netflix的谈话中了解到反应）。

一种解决方法：

在您的父doFooInB组件

<View>

将此doFooInB传递给<Component B>作为道具。
<Component B>读取道具，并做出相应的响应（使用从B渲染中调用的内部函数）
在父onPress组件中定义<View>事件，并将作为prop的函数传递给组件A.
onPress只需要setState({ doFooInB : true })或其他东西来触发重新渲染，这将触发组件B中的方法。

是的，这是更多的代码，但它确实比创建一些快捷方式更好。

Answer 4

由于可以在DOM对象上完成ref，因此给组件引用ref并不是更好的主意。因此，更好的解决方案是在父组件中创建函数并将该函数作为道具传递给子组件的onPress（）处理程序中的子组件，该方法作为this.props.method将自动调用父组件方法。这样就可以成功执行父组件方法。

<ComponentA>
  constructor(){
   this.method = this.methodA().bind(this);
   }

   methodA(){
   }

 <ComponentA method=this.methodA/>

 <ComponentB>
    <TouchableHighlight onPress={()=>{this.props.method}}>
  </ComponentB>

兄弟姐妹的沟通，未定义

4 个答案: