Менее неловко, чем День Благодарения, но все же сложно.
Я как раз собираюсь закончить второй этап учебного курса по разработке программного обеспечения во Flatiron, где мы узнали все о React, библиотеке JavaScript, разработанной ̶F̶a̶c̶e̶b̶o̶o̶k̶ Meta.
Как и большинство вещей в буткемпе по кодированию, поначалу это было трудно понять, на самом деле даже сложнее, чем наш первый этап, когда мы делали ванильный JS. Тем не менее, достаточно внимательно изучив код в нескольких упражнениях, вы можете просто вбить его в свой мозг методом грубой силы. И теперь я не могу представить себе попытку снова написать что-то на ванильном JS, хотя на этом этапе мы опирались на него.
Одна из самых изящных особенностей React — реквизит. Реквизиты — это аргументы, которые передаются компонентам React, и этот аргумент (или любая другая функция, представленная этим аргументом) затем может использоваться в указанном компоненте.
В приведенном ниже примере мы импортируем компонент itemData в наш родительский компонент App и передаем информацию в качестве реквизита.
Шаг 1. Настройте
С помощью этого импорта мы можем назначить переменную «items» и функцию установки «setItems» хуку useState, основанному на itemData. Затем этот хук позволит нам манипулировать информацией внутри itemData в нашем компоненте приложения.
Шаг 2. Переместите, переместите
Мы можем такжепереместить эту информацию в другие компоненты, когда мы передаем их в качестве аргументов через свойства. Переменная 'items' была передана в качестве аргумента свойству, также названному 'items' внутри компонента ShoppingList (совет: попробуйте назвать свои свойства так же, как ваш аргумент, или как что-то поясняющее, чтобы вы не забыли, что это такое). делает, то есть "onItemDelete={handleItemDelete}. Информацию внутри переменной 'items' теперь можно использовать и манипулировать ею внутри компонента ShoppingList.
Шаг 3. Методы безумия
Теперь ShoppingList может использовать «элементы» для различных функций и передавать новую информацию любым дочерним компонентам внутри него! В приведенном ниже примере это основа для методов .map и .filter в двух отдельных константах.
«itemsToDisplay» использует метод a.filter в сочетании с оператором if для перебора данных внутри «элементов» и возврата категории в «элементах», если категория не равна «Все» в первом случае.
Другой (и последний) случай, когда мы используем данные в «элементах», находится в неупорядоченном списке с именем класса «Элементы». Здесь мы используем созданную ранее константу («itemsToDisplay») и используем метод .map для захвата данных и отправки их прямо в компонент Item с объявленными реквизитами «ключ», «имя» и «категория».
Заключение
Реквизиты позволили нам взять информацию, которая находилась внутри массива в ItemData (который был импортирован в приложение родительского компонента), и переместить ее в два дополнительных дочерних компонента ShoppingList и Items. Затем на эту информацию ссылаются внутри каждого компонента для своих собственных целей. Это экономит наше время, устраняя дополнительный код, написанный в каждом компоненте, поскольку мы ссылаемся на нашу информацию в свойстве и передаем это, вместо того, чтобы вводить код в каждом компоненте. Это делает наш код чище, меньше и его легче отслеживать в различных файлах.
