Создание многократно используемого компонента React
Интеграция компонентов React с ButterCMS
Заключение
React — одна из самых популярных библиотек JavaScript для создания пользовательских интерфейсов. Чтобы создать приложение с использованием React, вам просто нужно создать инкапсулированные компоненты, которые могут содержать свое собственное состояние. Ваше приложение должно быть набором компонентов React, которые можно многократно использовать.
Многократно используемые компоненты — это те компоненты React, которые могут использоваться в вашем приложении несколько раз. В результате они должны быть достаточно общими, чтобы в них не было сложной бизнес-логики. Если компонент содержит в себе какую-либо сложную логику, он не только становится трудным для повторного использования, но и становится менее ремонтопригодным. Крючки React идеально подходят для логики многократно используемых компонентов.
Например, приведенный ниже компонент App имеет кнопку, которую нельзя использовать повторно, поскольку он имеет onClick ] в нем жестко прописано:
function handleClick (e) {
// Некоторая функция, которая делает ложный вызов API
fakeApiCall (e.target.value);
}
function App () {
вернуть (
);
}
Приведенный выше код отображает следующий пользовательский интерфейс:
Здесь нет способа изменить текст Submit который отображается на кнопке.
Если мы хотим сделать вышеуказанный компонент многократно используемым, нам нужно сделать его более общим. Во-первых, мы можем создать отдельную функцию Button которую можно многократно импортировать и повторно использовать в нашем приложении:
function handleClick (e) {
// Некоторая функция, которая делает ложный вызов API
fakeApiCall (e.target.value);
}
function Button () {
вернуть (
);
}
Затем мы можем повторно использовать этот компонент Button внутри нашей функции App : [1945900] ]
function App () {
вернуть (
);
}
Приведенный выше код отображает следующий пользовательский интерфейс:
Как видите, мы уже многократно используем один компонент. Но нам все еще нужно сделать его более общим, потому что мы можем захотеть выполнять разные задачи одним нажатием кнопки. Например, мы можем выполнить отправку формы, сброс формы или выполнить другой вызов API для извлечения некоторых данных.
Давайте извлечем функцию handleClick из нашего компонента Button и передадим его в качестве реквизита. Наш компонент Button теперь будет выглядеть следующим образом:
Функциональная кнопка (реквизит) {
вернуть (
);
}
И наш компонент App будет выглядеть следующим образом:
function handleClick (e) {
// Некоторая функция, которая делает ложный вызов API
fakeApiCall (e.target.value);
}
function App () {
вернуть (
);
}
Как видите, мы можем передавать любую функцию компоненту Button через handleClick prop. Я настоятельно рекомендую вам проверить свои реквизиты, используя PropTypes .
Мы также можем использовать несколько компонентов Button внутри нашего компонента App : компонент
Функция handle APICall (e) {
// Делаем вызов API
}
function handleFormReset (e) {
// Сбросить некоторые данные формы
}
function App () {
вернуть (
);
}
Как вы видите, мы сделали наш компонент Button еще более гибким. Мы также можем передать текст, который отображается на кнопке, как реквизит.
Получите последние статьи о компонентах React, доставленные прямо на Ваш почтовый ящик.
Наш компонент Button теперь будет выглядеть следующим образом:
Функциональная кнопка (реквизит) {
вернуть (
);
}
И наш компонент App будет выглядеть следующим образом:
Функция handle APICall (e) {
// Делаем вызов API
}
function handleFormReset (e) {
// Сбросить некоторые данные формы
}
function App () {
вернуть (
);
}
Отображается следующий пользовательский интерфейс:
Уже многократно используется. Но мы также можем добавить некоторые дополнительные параметры, например, отображать ли значок перед меткой кнопки.
Для этого мы можем изменить наш компонент Button на следующее:
Функциональная кнопка (реквизит) {
вернуть (
);
}
И нам нужно передать этот значок опоры из нашего компонента Приложения : [1945900]
В приведенном выше примере используется font-awesome но вы можете использовать любой нужный шрифт. Вышеуказанные изменения отображают следующий пользовательский интерфейс:
Кроме того, было бы неплохо визуализировать значок только в том случае, если он присутствует. Для этого нам просто нужно внести следующие изменения в наш компонент Button :
Функциональная кнопка (реквизит) {
вернуть (
);
}
Наш компонент очень многократно используется в данный момент. Мы также можем передать другой дополнительный реквизит, называемый type который может контролировать, будет ли кнопка первичной или вторичной .
Нам необходимо внести следующие изменения в наш компонент Кнопка :
Нам также необходимо добавить несколько строк CSS в наше приложение:
.button.primary {
цвет фона: # 0886ff;
}
.button.secondary {
цвет фона: # 73a800;
}
Это отобразит следующий пользовательский интерфейс:
Наконец, мы можем различить наши первичные и вторичные кнопки. Также неплохо было бы добавить опору по умолчанию к нашей кнопке Button чтобы она отображала вторичный кнопки по умолчанию. Это действительно полезно, если мы забываем передать компоненту типа в наш компонент Button . Нам необходимо внести следующие изменения в наш компонент Button :
Приведенный выше код отобразит следующий пользовательский интерфейс:
Давайте создадим форму и интегрируем ее с ButterCMS . Во-первых, вам нужно проверить, есть ли у вас доступ к API записи. Вы можете проверить это в настройках . Затем нам нужно создать функцию App которая будет содержать форму:
function App () {
const [name, updateName] = useState ("");
function handleSubmit (e) {
e.preventDefault ();
API (имя);
}
вернуть (
);
}
Функция App содержит другую функцию handleSubmit которая будет отвечать за вызов API для сохранения данных to ButterCMS.
Как вы теперь видите, мы создали довольно многократно используемый компонент React Button . Вы можете использовать ту же идею для создания компонента в React. Весь код также доступен в CodeSandbox .
Я надеюсь, что это руководство поможет вам в ваших будущих проектах. Пожалуйста, не стесняйтесь поделиться своим мнением в разделе комментариев ниже.
Получите последние статьи о компонентах React, доставленные прямо на Ваш почтовый ящик.
Как видите, мы уже многократно используем один компонент. Но нам все еще нужно сделать его более общим, потому что мы можем захотеть выполнять разные задачи одним нажатием кнопки. Например, мы можем выполнить отправку формы, сброс формы или выполнить другой вызов API для извлечения некоторых данных. 
Уже многократно используется. Но мы также можем добавить некоторые дополнительные параметры, например, отображать ли значок перед меткой кнопки. 
Кроме того, было бы неплохо визуализировать значок 
Наконец, мы можем различить наши первичные 
Давайте создадим форму и интегрируем ее с 
Загрузка...
