Question

class Parent extends React.Component {
  foo() {
    console.log('i was called');
  }
  render() {
    return(
      this.props.childen;
    );
  }
}

class Child extends React.Component {
  render() {
    return(
      <div onClick="call foo here">Child</div>
    );
  }

}

React.render(<Parent><Child></Parent>, document.getElementById('View'));

我试图渲染Child，就像它在最后一行中所示。在这种情况下，如何将foo()从Parent传递给Child？

我通常在父母的渲染中知道<Child func={this.foo} />

Answer 1

您可以在Parent的render方法中调用Child，并将函数foo作为prop传递给它。然后在子组件上，您可以将其检索为道具。

 class Parent extends React.Component {
      foo() {
        console.log('i was called');
      }
      render() {
        return(
          <Child foo={this.foo} />
        );
      }
    }

    class Child extends React.Component {

    render() {
        return(
          <div onClick={this.props.foo}>Child</div>
        );
      }

    }

    React.render(<Parent />, document.getElementById('View'));

使用this.props.children时将父函数传递给子函数

1 个答案: