Application des Styles en Ligne en Pratique
Création d'un composant Notification
polyvalent affichant un texte et modifiant dynamiquement la propriété background-color
selon la prop behavior
. Mise en œuvre étape par étape.
Étape 1
Création du composant parent, App
, ainsi que du composant enfant, Notification
, en utilisant la structure de base de 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 />);
Étape 2
Pour fournir un style par défaut au composant Notification
, nous créons un objet appelé notificationStyles
et lui attribuons les propriétés suivantes :
padding
avec la valeur "20px"
;
fontSize
avec la valeur "24px"
;
color
avec la valeur "aquamarine"
;
// Define default styles as an object
const notificationStyles = {
padding: "20px",
fontSize: "24px",
color: "aquamarine",
};
Attribuons l'objet notificationStyles
à l'attribut style
du composant Notification component
, qui est appliqué à l'élément p
retourné.
// Child component - Notification
const Notification = (props) => (
<>
{/* Step 2: Apply default styles using inline styles */}
<p style={notificationStyles}></p>
</>
);
Étape 3
Dans le composant App
, nous pouvons utiliser le composant Notification
en passant la prop behavior
et la prop text
. La prop behavior
détermine l'apparence de la notification, tandis que la prop text
spécifie le texte à afficher dans la notification.
// 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" />
</>
);
Étape 4
Nous pouvons implémenter la logique pour colorer l'arrière-plan de chaque message de notification en fonction de la prop behavior
de la manière suivante :
- Si la valeur de
behavior
est"positive"
, la couleur de fond doit être définie surgreen
; - Si la valeur de
behavior
est"negative"
, la couleur de fond doit être définie surred
; - Si la valeur de
behavior
est"neutral"
, la couleur de fond doit être définie surblue
.
Nous pouvons créer une fonction pour gérer cette logique en utilisant l'instruction switch de JavaScript. Voici un exemple d'implémentation :
// 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";
}
};
Cette fonction prend la prop behavior
en argument et retourne la couleur de fond correspondante selon la valeur à l'aide de l'instruction switch
. La prop behavior
retournera une couleur de fond transparent
si elle ne correspond à aucun des cas spécifiés.
Intégrons cette fonction dans l'objet de style du composant :
// 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>
</>
);
Nous utilisons les conventions JavaScript pour garantir la bonne structure de l'objet de style. Tout d'abord, nous étendons l'objet notificationStyles
existant. Ensuite, nous ajoutons une propriété supplémentaire, backgroundColor
, dont la valeur est dérivée de la chaîne retournée par la fonction setBackgroundColor
.
Code complet de l'application :
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Application des Styles en Ligne en Pratique
Glissez pour afficher le menu
Création d'un composant Notification
polyvalent affichant un texte et modifiant dynamiquement la propriété background-color
selon la prop behavior
. Mise en œuvre étape par étape.
Étape 1
Création du composant parent, App
, ainsi que du composant enfant, Notification
, en utilisant la structure de base de 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 />);
Étape 2
Pour fournir un style par défaut au composant Notification
, nous créons un objet appelé notificationStyles
et lui attribuons les propriétés suivantes :
padding
avec la valeur "20px"
;
fontSize
avec la valeur "24px"
;
color
avec la valeur "aquamarine"
;
// Define default styles as an object
const notificationStyles = {
padding: "20px",
fontSize: "24px",
color: "aquamarine",
};
Attribuons l'objet notificationStyles
à l'attribut style
du composant Notification component
, qui est appliqué à l'élément p
retourné.
// Child component - Notification
const Notification = (props) => (
<>
{/* Step 2: Apply default styles using inline styles */}
<p style={notificationStyles}></p>
</>
);
Étape 3
Dans le composant App
, nous pouvons utiliser le composant Notification
en passant la prop behavior
et la prop text
. La prop behavior
détermine l'apparence de la notification, tandis que la prop text
spécifie le texte à afficher dans la notification.
// 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" />
</>
);
Étape 4
Nous pouvons implémenter la logique pour colorer l'arrière-plan de chaque message de notification en fonction de la prop behavior
de la manière suivante :
- Si la valeur de
behavior
est"positive"
, la couleur de fond doit être définie surgreen
; - Si la valeur de
behavior
est"negative"
, la couleur de fond doit être définie surred
; - Si la valeur de
behavior
est"neutral"
, la couleur de fond doit être définie surblue
.
Nous pouvons créer une fonction pour gérer cette logique en utilisant l'instruction switch de JavaScript. Voici un exemple d'implémentation :
// 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";
}
};
Cette fonction prend la prop behavior
en argument et retourne la couleur de fond correspondante selon la valeur à l'aide de l'instruction switch
. La prop behavior
retournera une couleur de fond transparent
si elle ne correspond à aucun des cas spécifiés.
Intégrons cette fonction dans l'objet de style du composant :
// 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>
</>
);
Nous utilisons les conventions JavaScript pour garantir la bonne structure de l'objet de style. Tout d'abord, nous étendons l'objet notificationStyles
existant. Ensuite, nous ajoutons une propriété supplémentaire, backgroundColor
, dont la valeur est dérivée de la chaîne retournée par la fonction setBackgroundColor
.
Code complet de l'application :
Merci pour vos commentaires !