代码之家 › 专栏 › 技术社区 › j.doe BudgieInWA

是否应绑定调用回调函数的函数?

ecmascript-6 reactjs javascript

j.doe BudgieInWA · 技术社区 · 6 年前

如果我从 Parent 到 GrandChild 应该 handleClick 被束缚在 Child 和 孙子 ?

帕伦特JS

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

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

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

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

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} />
    );
  }
}

孙子

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} />
    );
  }
}

3 回复 | 直到 6 年前

Joss Classey 6 年前

函数可以通过props访问,而不会在传递给子级时被绑定。只需要绑定到 this 在最初定义函数的组件中。

你只需要做 onClick={this.props.handeClick}

或者,如果要传递一些数据,可以这样做:

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

编辑:为了澄清,您只需要在parent.js中绑定handleclick。然后,您可以通过props向下传递该函数,并在子组件中使用 this.props .

Karl.S 6 年前

答案是上下文 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} />;
}

finefoot 6 年前

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

handleClick = () => {}

内联函数不正确(可能会出现不必要的呈现)。最好这样:

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

和

onClick={this.handleClick}