Question

如何从组件访问该组件所有者的方法？

即（也许）您需要获取一个指向元素所有者的指针，并且已经通过该指针调用了该方法。

例如：

组件＃1

class MyReport extends Component {
  my_method() {}

  render() {
    return (
      <MyReport>
        <MyElement />
      </MyReport>
    );
  }
}

和组件＃2

class MyElement extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    // GET METHOD my_method OF OWNER
    console.log(parent.my_method());
  }

  render() {
    return <Button onClick={this.handleClick}>Press</Button>;
  }
}

Answer 1

如果您正在寻找如何调用父方法的方法，则可以通过子组件的道具传递给它：

组件＃1

class MyReport extends Component {

  my_method() {
  }

  render() {
    return (
      <MyReport>
        <MyElement methodFromParent={this.my_method}/>
      </MyReport>
    );
  }
}

组件＃2

class MyElement extends Component {

  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    // GET METHOD my_method OF OWNER
    console.log(this.props.methodFromParent);
  }

  render() {
    return (
      <Button onClick={this.handleClick}>Press</Button>
    );
  }
}

尽管，用MyElement包装MyReport似乎是您在编写此问题时犯的一个错误。

React：如何触发父组件方法？

1 个答案: