Question

将回调函数作为道具传递给子组件很简单，反之亦然。

我们如何调用子组件的实例方法？

在<Parent />组件中，我需要调用this.bar组件的<Child />实例方法。

class Parent extends React.Component {
    render() {
        return (
            <Child />
        )
    }
}

class Child extends React.Component {
    constructor( props ) {
        super( props );
        this.bar = () => console.log('foo');

    }

}

Answer 1

您可以使用refs来做到这一点。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  componentDidMount() {
    this.childRef.current.bar()
  }

  render() {
    return (
      <Child ref={this.childRef} />
    );
  }
}

class Child extends React.Component {
  constructor( props ) {
    super( props );
    this.bar = () => console.log('foo');
  }

  render() {
    return <p>Child</p>
  }
}

签出Refs documentation

如何调用子组件的实例方法？

1 个答案: