Comment rendre conditionnellement des éléments React basés sur des accessoires : un guide de l'interface utilisateur dynamique avec des groupes de boutons ?

Rendu conditionnel des éléments React basés sur des accessoires

Dans React, il est souvent nécessaire d'afficher ou de masquer conditionnellement des éléments en fonction des données transmises par les composants parents. . Cela permet aux développeurs de créer des interfaces utilisateur dynamiques et réactives.

Cela est courant lorsqu'il s'agit de groupes de boutons. Vous souhaiterez peut-être afficher un groupe de boutons uniquement si certaines conditions sont remplies. Par exemple, vous pourriez avoir un groupe de boutons « Actions groupées » qui ne devrait être visible que si plusieurs éléments sont sélectionnés dans un tableau.

Pour ce faire, vous pouvez utiliser la syntaxe de rendu conditionnel dans la méthode de rendu de React. Le format général est :

<code class="javascript">{this.props.showBulkActions ? <ElementToShow /> : null}</code>

Dans cet exemple, this.props.showBulkActions est une propriété booléenne transmise par le composant parent. Si c'est vrai, le paramètre Le composant sera rendu. Sinon, rien ne sera rendu.

Cependant, dans l'extrait de code fourni, les accolades sont placées par erreur dans la chaîne d'attribut de classe :

<code class="javascript">className=&quot;btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"></code>

Cela empêche React d'évaluer correctement l'expression. . Pour résoudre ce problème, les accolades doivent être placées à l'extérieur de la chaîne, comme ceci :

<code class="javascript">className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

De plus, assurez-vous qu'il y a un espace après "pull-right" pour éviter de créer un nom de classe invalide. Avec ces ajustements, le groupe de boutons devrait désormais apparaître et disparaître de manière conditionnelle en fonction de la prop showBulkActions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!