Это продолжение React Binding Revealed Part1

В ES6 нет автоматической привязки методов по сравнению с React.createClass, где все методы привязаны к this объекту .

Поведение по умолчанию: метод печати вызывается при нажатии кнопки. Но вы не можете получить доступ к состоянию, потому что оно не привязано к компоненту. Вы получите сообщение об ошибке Невозможно прочитать свойство "state" со значением null.

Вы можете решить эту проблему, используя

  1. Метод привязки в рендере
  2. Функция стрелки
  3. Привязка конструктора

Использование # 3 рекомендуется по сравнению с другими привязками, поскольку в № 1 и № 2 есть незаметные накладные расходы на производительность, поскольку методы будут быть привязанным каждый раз, когда компонент визуализируется. И если ваш компонент визуализируется чаще, это может замедлить визуализацию.

Привязка конструктора

Помните, что при вызове print нельзя использовать фигурные скобки.

onClick = {this.print}

Я запуталась из-за этого. Если вы используете

onClick = {this.print ()}

print будет вызываться всякий раз, когда вызывается render.

Теперь давайте проверим, как передавать параметры в методы, связанные с конструктором.

Если вы вызываете print («Venus»), функция печати будет вызываться каждый раз при рендеринге перед щелчком. Поэтому вам нужно использовать либо стрелку, либо привязку при вызове метода.

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

Теперь давайте обсудим передачу методов в качестве свойств дочернему компоненту и способы привязки этих методов.

Взгляните на эти компоненты

Теперь кнопка «Печать из дочернего» находится в дочернем компоненте, и при ее нажатии вызывается метод printParent. Поскольку printParent ограничен в конструкторе родительского объекта, он имеет доступ к состоянию родительского компонента и свойствам. Таким образом, будет зарегистрировано «Я родитель».

Теперь давайте проверим, как передать параметры родительскому методу из дочернего компонента

Выход:

Вы не можете напрямую позвонить

onClick = {this.props.printParent («Марс»)}

это будет вызывать printParent каждый раз при рендеринге дочернего элемента. Таким образом, вам нужно привязать новый метод в дочернем компоненте, используя Привязку конструктора, функцию Стрелка или .bind () для привязки родительского метода.

Привязка дочернего конструктора

Привязка конструктора предпочтительна, если вы пишете свой собственный метод (printChild) в дочернем и выполняете некоторые манипуляции и вызываете родительский метод из свойств.

Если вы хотите напрямую вызвать родительский метод с параметрами для передачи, вы можете использовать Arrow / bind ()

Дочернее связывание с использованием вызова метода и стрелки

Резюме:

Привязка конструктора решает всю проблему методов доступа из компонента и дочернего компонента.

Есть библиотека autobind-decorator, которая делает привязку за вас.