Должны ли быть связаны функции, которые вызывают функцию обратного вызова? - PullRequest
0 голосов
/ 10 декабря 2018

Если я передаю функцию обратного вызова от 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} />
    );
  }
}

Ответы [ 3 ]

0 голосов
/ 10 декабря 2018

Функция стрелки лучше.И контекст this будет автоматически связываться.

handleClick = () => {}

Встроенная функция плоха (возможен ненужный рендеринг).Лучше вот так:

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

И

onClick={this.handleClick}
0 голосов
/ 11 декабря 2018

Ответ заключается в том, что контекст 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} />;
}
0 голосов
/ 10 декабря 2018

Функции могут быть доступны через реквизит, не будучи связанными при передаче детям.Необходимо только связать с this внутри компонента, в котором функция была первоначально определена.

Вам нужно только сделать onClick={this.props.handeClick}

или, если вы хотите передать некоторые данные, вы можетесделайте это так:

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

РЕДАКТИРОВАТЬ: просто чтобы уточнить, вам нужно только связать handleClick в Parent.js.Затем вы можете просто пропустить эту функцию через реквизиты и получить к ней доступ в дочерних компонентах, используя this.props.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...