Le rendu d’un groupe de composants ensemble sans élément parent est possible avec les fragments React. Apprenez-en davantage dans cet article.
React est une bibliothèque JavaScript utilisée pour créer des applications Web interactives. Nous combinons des composants dans une application en transmettant les données des composants parents aux composants enfants.
Une chose que nous devons souvent faire dans nos applications React est de restituer un groupe de composants ensemble. Pour ce faire sans les restituer dans un élément parent, nous pouvons utiliser des fragments. Dans cet article, nous verrons comment utiliser les fragments React.
Fragments de réaction
Les fragments sont nécessaires lorsque nous voulons restituer un groupe d’éléments sans élément ou composant parent. Pour l’utiliser, on utilise soit le Fragment composant ou <></> pour faire court.
Par exemple, au lieu d’écrire :
export default function App() {
return (
<div className="App">
<h1>Hello</h1>
<h2>World</h2>
</div>
);
}
ce qui rend le h1 et h2 éléments à l’intérieur d’un div, on écrit :
export default function App() {
return (
<>
<h1>Hello</h1>
<h2>World</h2>
</>
);
}
pour simplement rendre le h1 et h2 éléments sans le div autour d’eux.
Les fragments sont nécessaires car les composants doivent être restitués dans un conteneur.
Les fragments React sont pratiques pour diviser des éléments tels que les cellules d’un tableau en leurs propres composants. Par exemple, nous écrivons :
const Cells = () => {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
};
export default function App() {
return (
<table>
<tr>
<Cells />
</tr>
</table>
);
}
Nous pouvons mettre le td éléments dans le Cells composant par eux-mêmes car le fragment agit en tant que parent pour le td éléments. On peut donc simplement mettre le Cells composant en tant qu’enfant du tr élément.
Nous pouvons également utiliser des fragments comme valeurs d’accessoires. Par exemple, nous écrivons :
const AlertDialog = ({ children, buttons, open }) => {
return (
<dialog open={open}>
{children}
{buttons}
</dialog>
);
};
const OKButton = () => <button>OK</button>;
const CancelButton = () => <button>Cancel</button>;
const CloseDialog = ({ open }) => {
const buttons = (
<>
<OKButton />
<CancelButton />
</>
);
return (
<AlertDialog buttons={buttons} open={open}>
Are you sure you want to leave this page?
</AlertDialog>
);
};
export default function App() {
return <CloseDialog open />;
}
pour créer le AlertDialog composant qui a le children soutenir. Cela signifie que nous pouvons passer un bouton entre les AlertDialog Mots clés.
Il faut aussi le buttons prop qui s’affiche après le children. Nous passons dans le buttons fragment comme valeur du buttons soutenir.
Et cela rend le OKButton et CancelButton après « Êtes-vous sûr de vouloir quitter cette page ? » par conséquent. Par conséquent, les fragments peuvent être transmis en tant que valeurs d’accessoires.
Rendu d’une liste de fragments
Les fragments peuvent être utilisés pour restituer les éléments de la liste. Pour ce faire, au lieu d’utiliser le <></> sténographie, nous utilisons le Fragment composant.
Ceci est nécessaire parce que nous devons passer le key accessoire à Fragmentce que nous ne pouvons faire qu’avec le Fragment composant.
Par exemple, nous écrivons :
import { Fragment } from "react";
const posts = [
{
id: 1,
title: "The Ultimate Guide to Preparing for a Standardized Test",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
},
{
id: 2,
title: "5 Effective Study Strategies for Any Test",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
},
{
id: 3,
title: "How to Combat Test Anxiety and Improve Your Scores",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
},
{
id: 4,
title: "The Pros and Cons of Online vs. In-Person Testing",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
},
{
id: 5,
title: "The Importance of a Good Night's Sleep Before a Test",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
},
{
id: 6,
title: "The Importance of a Good Night's Sleep Before a Test",
body:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate purus sapien. "
}
];
const PostTitle = ({ title }) => <h1>{title}</h1>;
const PostBody = ({ body }) => <div>{body}</div>;
export default function App() {
return posts.map((post) => (
<Fragment key={post.id}>
<PostTitle title={post.title} />
<PostBody body={post.body} />
</Fragment>
));
}
Nous rendons le posts tableau en HTML en appelant map avec un rappel qui renvoie un fragment pour chacun post entrée. Nous transmettons une valeur d’ID unique pour chaque entrée comme valeur du key prop afin que React puisse identifier et suivre chaque composant.
Et nous rendons tout ce que nous voulons à l’intérieur Fragment comme d’habitude. En conséquence, seul le h1sable divs sont rendus puisque nous mettons PostTitle et PostBody dans Fragment.
Un problème dont nous devons être conscients est que le basculement entre <><Child /></> et [<Child />] ne déclenche pas le nouveau rendu du composant qui les restitue. Cela s’applique également si nous basculons entre <><Child /></> et <Child />.
Regroupement d’éléments avec du texte à l’aide de fragments
Nous pouvons assembler du texte avec des composants en fragments. Par exemple, nous écrivons :
const DatePicker = ({ date }) => {
return <input type="date" value={date} />;
};
const DateRangePicker = ({ start, end }) => {
return (
<>
From
<DatePicker date={start} />
to
<DatePicker date={end} />
</>
);
};
export default function App() {
return <DateRangePicker start="2023-01-01" end="2023-01-31" />;
}
pour créer le DateRangePicker composant en mettant du texte avec le DatePicker composant dans le même fragment.
En conséquence, nous voyons une entrée de date après « De » et une autre après « à ».
Conclusion
Une chose que nous devons souvent faire dans nos applications React est de restituer un groupe de composants ensemble. Pour ce faire sans les restituer dans un élément parent, nous pouvons utiliser des fragments.
Nous pouvons les utiliser pour afficher des listes et ils peuvent être utilisés comme accessoires et composants enfants.
Source link