Question

如果我将回调函数从Parent传递到GrandChild，应该将handleClick绑定在Child和GrandChild中吗？

Parent.js

class Parent extends React {
  constructor() {
    super();

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

  handleClick() {
    console.log('Clicked!');
  }

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

Child.js

class Child extends React {
  constructor() {
    super();

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

  handleClick() {
    const { onClick: callback } = this.props;

    callback();
  }

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

GrandChild.js

class GrandChild extends React {
  constructor() {
    super();

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

  handleClick() {
    const { onClick: callback } = this.props;

    callback();
  }

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

Answer 1

可以通过道具访问功能，而传递给孩子时无需绑定。只需绑定到最初定义该函数的组件内的this。

您只需要执行onClick={this.props.handeClick}

或者如果您想传递一些数据，可以这样：

onClick={(someData) => this.props.handeClick(someData)}

编辑：只是为了澄清，您只需要在Parent.js中绑定handleClick。然后，您可以通过props向下传递此函数，并使用this.props在子组件中访问它。

Answer 2

箭头功能更好。上下文this将被自动绑定。

handleClick = () => {}

内联函数不好（可能导致不必要的渲染）。最好像这样：

handleClick = (someData) => this.props.handeClick(someData)

和

onClick={this.handleClick}

Answer 3

答案是上下文this应该始终是逻辑所在的上下文，因此，如果处理handleClick的逻辑在类Parent中，则上下文为

除此之外，您的代码中还有一些问题。

1。您的组件类必须扩展React.Component或React.PureComponent而不是React本身（也许是复制粘贴错误，但如果不能解决，则应该扩展）。

请参阅：https://reactjs.org/docs/components-and-props.html#function-and-class-components

2。您不必命名应通过所有子组件传递的每个道具，如果使用ES6进行编码，则可以使用传播语法。

请参阅：https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

class Child extends React.Component {
  render() {
    return (
      // this is passing all props of Child to GrandChild
      <GrandChild {...this.props} />
    );
  }
}

3。对于没有状态的组件，使用function代替class，它的性能更高，代码也更小。

function Child(props) {
  return (
    <GrandChild {...props} />
  );
}

最后，您的代码可能如下所示：

function Parent(props) {
  function handleClick() {
    console.log('clicked');
  }
  return <Child onClick={handleClick} />;
}

function Child(props) {
  return <GrandChild {...props} />;
}

function GrandChild(props) {
  return <div onClick={props.onClick} />;
}

是否应该绑定调用回调函数的函数？

3 个答案: