无法从 React Native 中的父组件调用子组件方法答案

【问题标题】：Can't call child component method from parent component in React Native无法从 React Native 中的父组件调用子组件方法
【发布时间】：2019-03-16 22:41:16
【问题描述】：

我有一个 React Native 组件 <Parent>，其中包含一个组件 <Child>，我希望能够在 Parent 中调用 Child 的方法之一。在阅读了一堆其他帖子之后，这就是我所拥有的：

Child.js

export default class Child extends Component {
  method1() {
    console.log("success");
  }
  render() {
    return(
      <View/>
    )
  }
}

家长

export default class Parent extends Component {
  render() {
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.child.method1()}
        />
        <Child
          onRef={ref => (this.child = ref)}
        />
      </View>
    )
  }
}

我收到错误“_this2.child.method1 不是函数。”

我尝试过的其他事情是使用refInput 代替onRef，并使用ref => {this.child = ref} 代替ref => (this.child = ref)。

有什么想法吗？

谢谢！

【问题讨论】：

任何解决方案

标签： javascript reactjs react-native

【解决方案1】：

您可以在构造函数中使用React.createRef 创建一个引用，并使用ref prop 将其分配给子组件实例

发布您可以使用this.child.current访问孩子

示例代码：

class Child extends React.Component {
  myMethod() {
    console.log("myMethod called");
  }

  render() {
    return <Text>This is child</Text>;
  }
}

class App extends Component {
  constructor() {
    super();
    this.child = React.createRef();
  }
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.header}>
          <Image
            accessibilityLabel="React logo"
            source={{ uri: logoUri }}
            resizeMode="contain"
            style={styles.logo}
          />
          <Text style={styles.title}>React Native for Web</Text>
        </View>
        <Child ref={this.child} />
        <Button
          onPress={() => {
            this.child.current.myMethod();
          }}
          title="Example button(Click to trigger Child)"
        />
      </View>
    );
  }
}

Working demo

如果您的子组件通过 redux 的 connect 连接，您仍然可以通过在 connect 中将 withRef 选项设置为 true 来访问 childRef

connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(Child);

如果你使用v6或以上版本的redux，设置forwardRef属性而不是withRef

connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Child);

一旦你在父级中这样做，你就可以使用

访问 cchild 引用

this.child.current.getWrappedInstance()

【讨论】：

它不工作，它说 this.child.current.myMethod 不是一个函数
请查看演示。它确实有效。还将属性定义为 Child 上的 ref
你能在手机上做一个演示吗，我已经告诉过它在 react web 平台上工作
你的意思是 this.child.current.getWrappedInstance().methodName() 对吗？
谢谢你，你是救命稻草

【解决方案2】：

您可以做到这一点的一种方法是将函数向下传递给孩子，孩子可以将函数传递给。例如：

<TouchableOpacity
  onPress={() => this.childFunc()}
/>
<Child addMethod={func => this.childFunc = func}/>

然后只需从孩子内部调用props.addFunc(this.method1)。只需确保您的 this 是您想要的。

但更重要的是，您应该首先问自己为什么您需要这样做。

【讨论】：

【解决方案3】：

使用ref调用子方法

export default class Parent extends Component {
  render() {
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.refs.child.method1()}//<---------
        />
        <Child
          ref="child"//<-------
        />
      </View>
    )
  }
}

【讨论】：

您建议使用旧版 API "Legacy API: String Refs" "我们建议不要这样做，因为字符串引用有 some issues，被认为是旧版，并且 可能会在未来版本之一。”

【解决方案4】：

终于找到问题了。

@Shubham khatri 的回答肯定会起作用，它只会不适用于 redux。

如果您的子类使用 connect 包装

export default connect(mapStateToProps)(Athletes);

在这种情况下它不起作用，所以如果你想从父类调用子方法，请确保你正常使用它。

【讨论】：