Зміст курсу
Опановуємо React
Опановуємо React
Вбудовані Стилі на Практиці
Створимо універсальний компонент Notification
, який відображає текст і динамічно змінює властивість background-color
на основі пропсу behavior
. Розглянемо реалізацію покроково.
Крок 1
Ми почнемо зі створення батьківського компонента, App
, разом з дочірнім компонентом, Notification
, використовуючи базову структуру React.
// Import necessary dependencies and create a root element
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
// Child component - Notification
const Notification = (props) => <></>;
// Parent component - App
const App = () => <></>;
// Render the App component to the root element
root.render(<App />);
Крок 2
Щоб забезпечити стандартний стиль для компонента Notification
, ми створюємо об'єкт з назвою notificationStyles
і призначаємо йому наступні властивості:
padding
зі значенням "20px"
;
fontSize
зі значенням "24px"
;
color
зі значенням "aquamarine"
;
// Define default styles as an object
const notificationStyles = {
padding: "20px",
fontSize: "24px",
color: "aquamarine",
};
Присвоїмо об'єкту notificationStyles
значення атрибуту style
компонента Notification
, який буде застосовано до повернутого елемента p
.
// Child component - Notification
const Notification = (props) => (
<>
{/* Step 2: Apply default styles using inline styles */}
<p style={notificationStyles}></p>
</>
);
Крок 3
У компоненті App
ми можемо використовувати компонент Notification
, передавши йому проп behavior
і проп text
. Проп behavior
визначає зовнішній вигляд сповіщення, в той час як проп text
визначає текст, який буде відображено в сповіщенні.
// Parent component - App
const App = () => (
<>
{/* Step 3: Use the Notification component with behavior and text props */}
<Notification text="Success" behavior="positive" />
<Notification text="Failure" behavior="negative" />
<Notification text="Information" behavior="neutral" />
</>
);
Крок 4
Ми можемо реалізувати логіку розфарбовування фону кожного повідомлення-сповіщення на основі пропсу behavior
наступним чином:
- Якщо значення
behavior
є"positive"
, колір фону має бути встановлений наgreen
. - Якщо значення
behavior
є"negative"
, колір фону слід встановитиred
. - Якщо значення
behavior
є"neutral"
, колір фону має бутиblue
.
Ми можемо створити функцію для обробки логіки за допомогою оператора switch
в JavaScript. Ось приклад того, як це можна реалізувати:
// Function to set background color based on behavior prop
const setBackgroundColor = (behavior) => {
switch (behavior) {
case "positive":
return "green";
case "negative":
return "red";
case "neutral":
return "blue";
default:
return "transparent";
}
};
Ця функція приймає проп behavior
як аргумент і повертає відповідний колір фону на основі значення за допомогою оператора switch
. Проп behavior
поверне transparent
колір фону, якщо він не відповідає вказаним випадкам.
Давайте включимо цю функцію в об'єкт стилю компонента:
// Child component - Notification
const Notification = (props) => (
<>
{/* Step 2, : Apply default styles using inline styles */}
{/* Step 4, : Apply the value for the background-color property
based on the behavior prop */}
<p
style={{
...notificationStyles,
backgroundColor: setBackgroundColor(props.behavior),
}}
>
{props.text}
</p>
</>
);
Ми використовуємо домовленості JavaScript, щоб забезпечити належну структуру об'єкта стилю. Спочатку ми поширюємо існуючий об'єкт notificationStyles
. Потім ми вводимо додаткову властивість backgroundColor
, значення якої отримується з рядка, що повертається функцією setBackgroundColor
.
Повний код програми:
Дякуємо за ваш відгук!