Я заметил интересную проблему в моем проекте React. Я решил проблему, следуя 1-му подходу, но я хотел бы знать разницу между следующими подходами обратного вызова при передаче в качестве опоры:

< Сильный > 1 . Функция стрелки (отлично работает внутри render())

    changeImage={ () => this.handleImageUploadModal('OPEN') }

< Сильный > 2 . Ссылка на функцию (Uncaught RangeError: превышен максимальный размер стека вызовов)

    changeImage={ this.handleImageUploadModal('OPEN') }
0
Sibasish Mohanty 28 Окт 2019 в 16:12

2 ответа

Лучший ответ

Первое - это определение функции, вы говорите ей «выполнять эту функцию при изменении». Важное слово - «определение»: вы его не исключаете, вы его определяете. У него нет команды start:

changeImage={ () => {return this.handleImageUploadModal('OPEN')}() }
// If you want it called instantly, you have to start it:     --^^

Второй вы должны прочитать в качестве параметра. Более очевидный пример:

showImage={ this.shouldImageBeShown() }

Эта функция будет вызвана мгновенно, чтобы определить, следует ли показывать изображение, и вернет истину / ложь -> showImage={true}.

Если вы хотите ввести имя функции без его запуска, вы можете удалить часть функции (), чтобы она не вызывалась, а только объявлялась:

changeImage={ this.openImageUploadModal }
1
Martijn 28 Окт 2019 в 13:23

changeImage={ this.handleImageUploadModal('OPEN') }

Это означает «немедленно вызовите handleImageUploadModal и передайте возвращаемое значение в реквизит changeImage». Я предполагаю, что handleImageUploadModal вызывает setState, что означает, что компонент будет перерисовываться, и этот процесс повторяется.

changeImage={ () => this.handleImageUploadModal('OPEN') }

Это означает «создать функцию с текстом () => this.handleImageUploadModal('OPEN') и передать ее в реквизит changeImage». Вновь созданная функция не вызывается (пока), но может вызываться всякий раз, когда компонент считает это необходимым.

0
Nicholas Tower 28 Окт 2019 в 13:16
58591574