Функции, переданные для реакции дочерних компонентов, не получают контекст функции

Question

Я застрял при использовании реакции, при этом я передаю функцию из родительского компонента нескольким дочерним компонентам. Эта функция вызывает другие функции, которые также находятся в родительском компоненте.

Дочерние компоненты успешно запускают функцию, но, к сожалению, функция не работает, потому что кажется, что у нее нет того же контекста из дочерних элементов, например. он начинает вызывать другие функции, хранящиеся в родительском элементе, и получает значение undefined. Это странно, потому что ошибка исходит из файла родительского компонента, а не из файла дочернего компонента.

Я не был уверен, передавать ли все функции дочерним элементам, что кажется довольно громоздким, а также похоже на Мне все равно не хватало бы важного контекста функции.

Я тестировал запуск той же функции в родительском компоненте, и у нее нет проблем, почти как контекст функции из родительского компонента не передается в дочерний компонент, только сама функция.

Это правильно?

Вот пример, в котором у дочернего компонента есть кнопка для нажатия, которая запускает функцию, переданную из родительского компонента, и включает выполнение других функций из родительского компонента компонент, обновляющий состояние и внесение изменений, et c.

Родительский элемент:

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "React",
      toggle: true,
      ...
    };
  }
  toggleComponent(name) {
      this.toggling(name); // THIS IS WHERE THE ERROR OCCURS ON THE CHILD ELEMENT, undefined.
  }
  toggling(name) {
      does some stuff...
  }

  render() {
   return (
    <Comp toggleComponent={this.toggleComponent}/>
   )
  }

Дочерний элемент:

class Demo1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
       <div className="button" onClick={() => this.props.toggleComponent('theCompName')}>Continue</div>
    )

Сообщите мне, что можно сделать для передачи дополнительного контекста дочерним компонентам или если есть лучший способ сделать это.

Спасибо, вы все очень умны.

Answer 1

В конструкторе вашего класса Content попробуйте привязать функцию toggleComponent к классу, используя .bind():

  constructor(props) {
    super(props);
    this.state = {
      name: "React",
      toggle: true,
      ...
    };

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

По умолчанию методы класса не «привязаны» к классу. Это означает, что ваше ключевое слово this в toggleComponent не относится к классу Content, пока вы не укажете его с помощью .bind().

Надеюсь, это поможет!

Дополнительная информация может быть найдено здесь: https://reactjs.org/docs/handling-events.html

Answer 2

Использовать синтаксис стрелки в функциях родительского компонента. Это позволит функциям родительского компонента выполняться в контексте родительского компонента. В противном случае вам придется наделать кучу привязки (этого) дерьма, чтобы все работало правильно.