Question

我有一个包含组件<Parent>的React Native组件<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)。

有什么想法吗？

谢谢！

Answer 1

您可以在构造函数中使用React.createRef创建引用，并使用ref prop

将其分配给Child组件实例。

发布您可以使用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()

Answer 2

执行此操作的一种方法是将函数向下传递给孩子，孩子可以将函数传递给孩子。例如：

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

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

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

Answer 3

您可以将Child的method1设为“静态方法”，然后在父对象中调用它，例如：

Child.method1();

Answer 4

使用 ref 调用子方法

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

Answer 5

最后找到了问题。

@Shubham khatri的答案肯定会起作用，仅对redux无效。

如果您的子类用connect换行

export default connect(mapStateToProps)(Athletes);

在这种情况下将无法使用，因此，如果要从父类调用子方法，请确保以正常方式使用它。

无法在React Native中从父组件调用子组件方法

5 个答案: