Если вы читаете это, то вы, скорее всего, энтузиаст React, который отправился в путь, чтобы создать с помощью React что-то действительно классное, и вы наткнулись на волшебное слово: props. Вы спросите, о чем весь этот шум? Что ж, реквизит — это ваш пропуск в создание динамических и повторно используемых компонентов, которые могут оживить ваш пользовательский интерфейс. Независимо от того, являетесь ли вы новичком в программировании или мастером кодирования, пытающимся научиться использовать реквизиты, этот блог станет вашим путеводителем по пониманию того, как реквизиты работают, чтобы сделать ваши веб-страницы динамичными.
Реквизит: Игрок в нашей истории
Хорошо, начнем с основ. Целью React является создание модульных компонентов, которые можно творчески комбинировать для создания впечатляющих пользовательских интерфейсов. Пропы, сокращение от «свойства», подобны мощным посланникам, которые позволяют этим компонентам общаться друг с другом. Они позволяют передавать данные из родительского компонента в его дочерние компоненты. Думайте о реквизите как о секретном соусе, который превращает ваши компоненты из статических в динамические, оживляя ваш пользовательский интерфейс.
Вариант использования карточек контактов
Хорошо, давайте погрузимся в забавный сценарий: представьте, что вы создаете приложение со списком контактов. Вместо скучного списка старой школы вы хотите оживить ситуацию карточками для каждого контакта. На каждой карточке должно быть указано изображение контакта, имя, номер телефона и адрес электронной почты.
Начнём с простого: нет реквизита, нет славы
Поначалу вам, возможно, просто захочется посмотреть, как все выглядит, верно? Чтобы сделать это при разработке внешнего интерфейса, в большинстве случаев вам нужно создать статическое представление веб-страницы. Итак, давайте жестко закодируем некоторые детали непосредственно в компоненте Contacts. Это похоже на набросок макета карточек контактов перед тем, как добавить настоящую изюминку. Вот краткий обзор компонента Contacts с жестко запрограммированными деталями:
import React from "react";
export default function Contacts() {
return (
<div className="contact-card">
<img src="/path/to/image.png" alt="Profile" />
<h3>Jane Doe</h3>
<div className="info-group">
<img src="./images/phone-icon.png" alt="Phone icon" />
<p>(123) 456-7890</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" alt="Mail icon" />
<p>[email protected]</p>
</div>
</div>
<div className="contact-card">
<img src="/path/to/image.png" alt="Profile" />
<h3>John Smith</h3>
<div className="info-group">
<img src="./images/phone-icon.png" alt="Phone icon" />
<p>(123) 456-7777</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" alt="Mail icon" />
<p>[email protected]</p>
</div>
</div>
// Other contact-card divs here
);
}
Но подождите, это неправильно. Что делать, если приложению приходится обрабатывать больший объем данных? Вы, как разработчик, не собираетесь сидеть и вносить изменения каждый раз, когда захотите добавить (или удалить) пользователя из списка… Вот тут-то и играют роль реквизиты. Вместо жесткого кодирования мы будем передавать уникальные детали в виде реквизитов из родительский компонент и упростите компонент для контактов, изменив его с Contacts на Contact. Мы также назовем родительский компонент App.
Давайте будем динамичными: представляем реквизит
Наш App.js с родительским компонентом App может выглядеть так:
import React from "react";
import Contact from "./Contact";
function App() {
return (
<div className="contacts">
<Contact
img="/path/to/image.png"
name="Jane Doe"
phone="(123) 456-7890"
email="[email protected]"
/>
<Contact
img="/path/to/image.png"
name="John Smith"
phone="(123) 456-7777"
email="[email protected]"
/>
{/* More Contact components */}
</div>
);
}
export default App;
Пары ключ-значение (например, img="./images/john-smith.png") являются свойствами каждого компонента Contact, которые должны передаваться следующим образом:
import React from "react";
export default function Contact(props) {
return (
<div className="contact-card">
<img src={props.img} alt={props.name} />
<h3>{props.name}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" alt="Phone icon" />
<p>{props.phone}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" alt="Mail icon" />
<p>{props.email}</p>
</div>
</div>
);
}
При этом значения каждой клавиши img или phone передаются соответствующим компонентам контакта.
Реквизиты также можно передавать через деструктуризацию, поскольку передается объект, например:
import React from "react";
export default function Contact({img, name, phone, email}) {
return (
<div className="contact-card">
<img src={img} alt={name} />
<h3>{name}</h3>
<div className="info-group">
<img src="./images/phone-icon.png" alt="Phone icon" />
<p>{phone}</p>
</div>
<div className="info-group">
<img src="./images/mail-icon.png" alt="Mail icon" />
<p>{email}</p>
</div>
</div>
);
}
Итак, если вы знакомы с синтаксисом деструктуризации, вы также можете использовать этот метод.
Интеграция базы данных
Как упоминалось ранее, вы не захотите сидеть перед экраном и писать эти данные несколько раз, чтобы они могли быть отображены, и если у вас есть база данных, каждый раз, когда делаются новые записи или удаления, ваше приложение может запрашивать базу данных. когда необходимо отобразить обновленную информацию.
Образец кода:
import React, { useState, useEffect } from "react";
import Contact from "./Contact"; // importing the Contact component like before
import axios from "axios"; // Assuming you're using Axios for API requests
function App() {
const [contacts, setContacts] = useState([]);
useEffect(() => {
// Fetch contacts data from a database or API
axios.get("https://example.com/api/contacts")
.then(response => {
setContacts(response.data);
})
.catch(error => {
console.error("Error fetching data:", error);
});
}, []);
return (
<div className="contacts">
{contacts.map(contact => (
<Contact
key={contact.id}
img={contact.img}
name={contact.name}
phone={contact.phone}
email={contact.email}
/>
))}
</div>
);
}
export default App;
Вот интересный момент: если вы внимательно посмотрите на свой компонент Contact, записав консоль props в компоненте Contact, вы обнаружите, что реквизиты на самом деле представляют собой JSON-подобные объекты, содержащие все переданные свойства. Заглянув в консоль, вы обнаружите такие объекты:
{
"img": "/path/to/image.png",
"name": "Jane Doe",
"phone": "(123) 456-7890",
"email": "[email protected]"
}
{
"img": "/path/to/image.png",
"name": "John Smith",
"phone": "(123) 456-7777",
"email": "[email protected]"
}
// Other instances
Вы можете заметить, что реквизиты ведения журнала консоли отображают разные объекты со свойствами, которые мы указали в каждом компоненте Contact. Когда вы создаете несколько экземпляров компонента Contact, каждый экземпляр имеет свой собственный набор реквизитов, как мы проиллюстрировали, а оператор console.log(props) находится в коде компонента, поэтому он выполняется для каждого экземпляра при визуализации компонента. Вот почему вы видите объекты для каждого экземпляра.
Подведение итогов
Вот и все, краткое описание того, как реквизиты работают в React! От придания вашему пользовательскому интерфейсу динамичности до работы компонентов с реальными данными, реквизиты — это незамеченные герои за кулисами.
Помните: в следующий раз, когда вы будете создавать приложение, которому потребуется немного индивидуальности, просто передайте некоторые реквизиты, и пусть компоненты говорят сами за себя. Приятного кодирования! 🚀
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.
