Когда я впервые изучал, как использовать React, идея передачи реквизита между разными файлами/компонентами казалась пугающей, но теперь, когда я гораздо лучше это понимаю, я нахожу ее чрезвычайно полезной и, осмелюсь сказать, даже забавной в использовании. во время. Теперь, когда у меня есть хорошее понимание этого, я здесь, чтобы поделиться с вами тем, как использовать и передавать функции в качестве реквизита.
Объяснение
На данный момент предположим, что у нас есть два компонента в нашем компоненте приложения: «Домашняя страница» и «Профиль». Наш профиль и домашняя страница наши братья и сестры в нашем компоненте приложения. Так:
А в компоненте App сделаем функцию:
function clickTest() {
console.log("test")
}
Допустим, мы хотим выполнить эту функцию в нашем компоненте домашней страницы без повторного создания функции. Как бы мы передали эту функцию из нашего компонента приложения на домашнюю страницу, чтобы он мог с ней взаимодействовать? Ну, мы должны были бы передать это на главную страницу в качестве опоры.
Глядя на строку 7, мы передали clickTest() в HomePage. «clickTest» слева объявляет имя для «{clickTest}» справа. Мы могли бы назвать левый как угодно (конечно, мы бы хотели, чтобы его назвали как-то точно), но пока мы собираемся оставить имена прежними.
Теперь давайте продолжим и посмотрим на наш компонент HomePage. Чтобы компонент HomePage мог принять реквизит «clickTest», он должен принять его в верхней части функции.
function Homepage({clickTest}) {
...
Точно так же HomePage теперь имеет доступ к функции clickTest!
Теперь предположим, что главная страница — это новая функция:
В этом текущем состоянии только компонент HomePage может получить доступ к «homePageFunction()». Что, если бы мы захотели передать эту функцию ее родственному «Профилю»? Ну, к сожалению, это невозможно. Фактически, наш компонент приложения не может получить доступ к функции homePageFunction().
Лучшая аналогия, которая у меня есть, заключается в том, что корни могут расти вниз по дереву компонентов, но единственный способ получить информацию обратно — это подняться вверх по корням. Должен быть способ вернуть данные обратно. Из-за этих ограничений всегда полезно иметь хороший план ваших компонентов, прежде чем создавать слишком много кода.
Вот еще несколько идей, которые могут дать вам лучшее понимание.
Допустим, у нашей домашней страницы есть еще 2 дочерних компонента: «Вход» и «Панель».
Помните нашу функцию clickTest(), которую мы полностью создали в компоненте приложения? Пока мы передавали его, каждый отдельный компонент до сих пор мог иметь к нему доступ, поскольку он был построен в самом верху вашего проекта реагирования.
Как насчет созданной нами функции homePageFunction()? Какие компоненты могут получить к этому доступ? Что ж, поскольку он встроен в наш компонент HomePage, наши новые компоненты «Вход» и «Панель» могут получить к нему доступ, но «Приложение» и «Профиль» не могут.
Заключение
Итак, резюмируя:
- Созданные функции могут быть переданы только вниз по дереву
- Любой компонент под компонентом, создавшим функцию, может ее использовать.
- Функции нельзя использовать над компонентом, сделанным
- Функции не могут использоваться братьями и сестрами компонента, созданного
- Функции могут быть переданы так низко, как вы хотите
Это были основы передачи функций в качестве свойств в React. Я надеюсь, что это дало некоторое представление о том, как начать передачу реквизита! Это был главный удар по скорости, который у меня был, когда я впервые изучал React, поэтому я надеюсь, что вы сможете использовать мои знания!
