Quelques questions d'entretien courantes sur React (partager)

[Recommandations de sujets connexes : questions d'entrevue de réaction (2020)]

1. Le logiciel fournit un mode plug-in tiers pour personnaliser le processus d'interception du réducteur d'action-> Devenir action -> middlewares -> Ce mécanisme nous permet de modifier le flux de données et de mettre en œuvre des fonctions telles que l'action asynchrone, le filtrage des actions, la sortie du journal, le rapport d'exceptions, etc.

Middleware commun : redux-logger : fournit une sortie de journal ; redux-thunk : gère les opérations asynchrones ; redux-promise : gère les opérations asynchrones ; la valeur de retour d'actionCreator est promise

2. sont les inconvénients ?

Réponse : 1. Les données requises par un composant doivent être transmises depuis le composant parent, et ne peuvent pas être obtenues directement depuis le magasin comme le flux.

2. Lorsque les données pertinentes d'un composant sont mises à jour, même si le composant parent n'a pas besoin d'utiliser ce composant, le composant parent sera quand même restitué, ce qui peut avoir un impact sur l'efficacité, ou il peut être nécessaire d'écrire un ShouldComponentUpdate complexe pour le jugement.

3. Comment les composants de réaction sont-ils divisés en composants métier et composants techniques ?

Réponse : les composants sont généralement divisés en composants d'interface utilisateur et en composants de conteneur en fonction de leurs responsabilités. Les composants de l'interface utilisateur sont responsables de la présentation de l'interface utilisateur et les composants du conteneur sont responsables de la gestion des données et de la logique. Les deux sont connectés via la méthode de connexion fournie par React-Redux.

4. Fonction de cycle de vie React

Réponse : 1. Phase d'initialisation :

getDefaultProps : récupère les propriétés par défaut de l'instance

getInitialState : récupère chaque instance État d'initialisation

componentWillMount : Le composant est sur le point d'être chargé et rendu sur la page

render : Le composant génère un nœud DOM virtuel ici

componentDidMount : Le composant est réellement chargé après son chargement

2. État d'exécution :

componentWillReceiveProps : appelé lorsque le composant est sur le point de recevoir des propriétés

shouldComponentUpdate : lorsque le composant reçoit de nouvelles propriétés ou de nouvelles status (peut renvoyer false , ne se met pas à jour après avoir reçu des données, empêche les appels de rendu et les fonctions suivantes ne continueront pas à être exécutées)

componentWillUpdate : le composant est sur le point d'être mis à jour et ne peut pas modifier les propriétés et l'état

Render : Le composant est redessiné

componentDidUpdate : Le composant a été mis à jour

3 Phase de destruction :

componentWillUnmount : Le composant est sur le point d'être détruit

5. Quelle fonction périodique est l'optimisation des performances de réaction ?

Réponse : ShouldComponentUpdate Cette méthode est utilisée pour déterminer si la méthode de rendu doit être appelée pour redessiner le dom. Étant donné que le rendu du DOM consomme beaucoup de performances, si nous pouvons écrire un algorithme de comparaison DOM plus optimisé dans la méthode ShouldComponentUpdate, les performances peuvent être considérablement améliorées.

6. Pourquoi le dom virtuel améliore-t-il les performances ?

Réponse : Le dom virtuel équivaut à ajouter un cache entre js et le dom réel, en utilisant l'algorithme dom diff pour éviter les opérations dom inutiles, améliorant ainsi. performance.

Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Utilisez la structure d'objet JavaScript pour représenter la structure de l'arborescence DOM, puis utilisez cette arborescence pour créer une véritable arborescence DOM et insérez-la dans le document;

2. Lorsque l'état change, reconstruisez une nouvelle arborescence d'objets. Comparez ensuite le nouvel arbre avec l'ancien arbre et enregistrez les différences entre les deux arbres ;

Appliquez les différences enregistrées à l'étape 2 au véritable arbre DOM construit à l'étape 1, et la vue sera mise à jour.

7. Algorithme Diff ?

Réponse : 1. Décomposez l'arborescence selon les niveaux et comparez uniquement les éléments du même niveau.

2. Ajoutez un attribut clé unique à chaque unité de la structure de liste pour faciliter la comparaison.

3. React ne fera correspondre que les composants de la même classe (la classe fait ici référence au nom du composant)

4. Dans l'opération de fusion, lors de l'appel de la méthode setState du composant. , React sera marqué comme sale. À la fin de chaque boucle d'événement, React vérifie tous les composants marqués comme sales et les redessine

6. Rendu sélectif des sous-arbres. Les développeurs peuvent remplacer ShouldComponentUpdate pour améliorer les performances des différences.

8. Solution d'optimisation des performances React

Réponse : 1) Réécrivez ShouldComponentUpdate pour éviter les opérations DOM inutiles.

2) Utilisez la version de production de React.js.

3) Utilisez la clé pour aider React à identifier les plus petits changements de tous les sous-composants de la liste

9 Décrivez brièvement l'idée du flux

Réponse : La plus grande fonctionnalité de Flux est. le « sens unique » du flux de données ».

1. L'utilisateur accède à la vue

2. La vue émet l'action de l'utilisateur

3 Le répartiteur reçoit l'action et demande au magasin de se mettre à jour en conséquence

.

4 Après la mise à jour du .Store, un événement "change" est envoyé

5. Vue Après avoir reçu l'événement "change", la page est mise à jour

10. Quel type de un échafaudage a-t-il été utilisé dans le projet React ? Mern ? Yeoman ?

Réponse : Mern : MERN est un outil d'échafaudage qui peut facilement générer des applications JS isomorphes à l'aide de Mongo, Express, React et NodeJS. Il minimise le temps d'installation et vous permet d'utiliser une technologie éprouvée pour accélérer le développement.

11. Connaissez-vous React ?

R : Oui, React est une bibliothèque de composants légère développée par Facebook. Elle est utilisée pour résoudre certains problèmes de la couche de vue frontale, qui est le problème de la couche V dans MVC son site Web interne Instagram. utilise React.

12. Quels problèmes React résout-il ?

Réponse : Trois problèmes ont été résolus : 1. Problème de réutilisation des composants, 2. Problème de performances, 3. Problème de compatibilité :

13. Protocole React ?

Réponse : L'accord suivi par React est "Licence BSD + Accord Open Source breveté". Cet accord est assez étrange si votre produit n'est pas en concurrence avec Facebook, vous pouvez utiliser React librement, mais s'il y a de la concurrence. , , votre licence d'utilisation de React sera annulée

14. Comprenez-vous ShouldComponentUpdate ?

Réponse : La technologie React Virtual dom nécessite une comparaison différentielle constante entre le dom et le dom virtuel. Si l'arborescence dom est grande, cette opération de comparaison prendra plus de temps. Par conséquent, React fournit une fonction de correctif telle que ShouldComponentUpdate. Si Pour certains changements, si nous ne voulons pas qu'un composant soit actualisé, ou s'il est actualisé et reste le même qu'avant, nous pouvons utiliser cette fonction pour l'indiquer directement à React, éliminant ainsi le besoin d'opérations de comparaison et améliorant encore l'efficacité.

15. Comment fonctionne React ?

Réponse : React créera un DOM virtuel. Lorsque l'état d'un composant change, React marquera d'abord les changements dans le DOM virtuel via l'algorithme de « différence ». La deuxième étape est la réconciliation, et le DOM sera mis à jour avec les résultats de la différence.

16. Quels sont les avantages d’utiliser React ?

Réponse : 1. Il est facile de savoir comment un composant est rendu en regardant simplement la fonction de rendu

2 L'introduction de JSX rend le code du composant plus lisible et plus facile à comprendre. la disposition des composants, ou la façon dont les composants se réfèrent les uns aux autres

3. Prise en charge du rendu côté serveur, ce qui peut améliorer le référencement et les performances

4 Facile à tester

5. . React se concentre uniquement sur la couche View, il peut donc être utilisé avec n'importe quel autre framework (tel que Backbone.js, Angular.js)

17 Il existe une différence entre le composant de présentation (composant Présentation) et. le composant conteneur (Composant Container) Quelle est la différence ?

Réponse : 1. Les composants d'affichage se soucient de leur apparence. Display accepte spécifiquement les données et les rappels via des accessoires et n'a presque jamais son propre état, mais lorsque le composant d'affichage a son propre état, il ne se soucie généralement que de l'état de l'interface utilisateur plutôt que de l'état des données.

2. Les composants du conteneur sont plus préoccupés par la façon dont les composants fonctionnent. Les composants de conteneur fournissent des données et un comportement au composant de présentation ou à d'autres composants de conteneur. Ils appellent des actions Flux et les fournissent sous forme de rappels au composant de présentation. Les composants conteneurs sont souvent avec état car ce sont des sources de données (pour les autres composants)

18. Quelle est la différence entre un composant Classe et un composant Fonctionnel ?

Réponse : 1. Les composants de classe vous permettent non seulement d'utiliser davantage de fonctions supplémentaires, telles que l'état et les hooks de cycle de vie du composant, mais permettent également au composant d'accéder directement au magasin et de maintenir son état

2. Lorsqu'un composant reçoit uniquement des accessoires et restitue le composant lui-même sur la page, le composant est un « composant sans état » et peut être créé à l'aide d'une fonction pure. De tels composants sont également appelés composants stupides ou composants de présentation

19. Quelle est la différence entre l'état (state) et les accessoires (d'un composant) ?

Réponse : 1. L'état est une structure de données utilisée pour la valeur par défaut des données requises lors du montage du composant. L'état peut muter au fil du temps, mais le plus souvent en raison du comportement des événements de l'utilisateur.

2. Props (abréviation de propriétés) est la configuration du composant. Les accessoires sont transmis des composants parents aux composants enfants, et en ce qui concerne les composants enfants, les accessoires sont immuables. Un composant ne peut pas modifier ses propres accessoires, mais il peut assembler les accessoires de ses sous-composants (gestion unifiée). Les accessoires ne sont pas non plus de simples données : les fonctions de rappel peuvent également être transmises via des accessoires.

20. Où la requête Ajax doit-elle être initiée dans le composant React ?

Réponse : dans les composants React, les requêtes réseau doivent être initiées dans composantDidMount. Cette méthode sera exécutée lors du premier "montage" du composant (ajouté au DOM) et ne sera exécutée qu'une seule fois dans le cycle de vie du composant. Plus important encore, vous n'êtes pas assuré que la requête Ajax soit terminée avant que le composant ne soit monté, et si c'est le cas, cela signifie que vous essaierez d'appeler setState sur un composant non monté, ce qui ne fonctionnera pas. Faire une requête réseau dans composantDidMount garantira qu'il existe un composant prêt à être mis à jour.

21. Qu'est-ce qu'un composant contrôlé ?

Réponse ; En HTML, les éléments de formulaire tels que , et <select> conservent leur propre état et se mettent à jour en fonction des entrées de l'utilisateur. Lorsque l'utilisateur soumet le formulaire, les valeurs des éléments mentionnés précédemment seront envoyées avec le formulaire. Mais c'est un peu différent dans React. Le composant contenant l'élément de formulaire suivra la valeur d'entrée dans l'état, et chaque fois que la fonction de rappel est appelée, comme onChange, l'état sera mis à jour et le composant sera restitué. Un élément du formulaire de saisie dont la valeur est contrôlée par React de cette manière est appelé un « élément contrôlé ». </p> <p style="text-align:left;">22. Quel est le rôle des arbitres dans React ? </p> <p style="text-align:left;">Réponse : les références peuvent être utilisées pour obtenir une référence à un nœud DOM ou à un composant React. De bons exemples d'utilisation des références sont la gestion de la sélection du focus/texte, le déclenchement d'animations de commandes ou l'intégration avec des bibliothèques DOM tierces. Vous devez éviter d’utiliser les références de chaîne et les rappels de référence en ligne. Les rappels Refs sont recommandés par React. </p> <p style="text-align:left;">23. Qu'est-ce qu'un composant d'ordre supérieur ? </p> <p style="text-align:left;">Réponse : Un composant d'ordre supérieur est une fonction qui prend un composant comme paramètre et renvoie un nouveau composant. HOC vous permet de réutiliser le code, la logique et les abstractions d'amorçage. La fonction la plus courante est probablement la fonction de connexion de Redux. En plus de simplement partager des bibliothèques d'outils et une composition simple, le meilleur moyen pour HOC est de partager les comportements entre les composants React. Si vous constatez que vous avez écrit beaucoup de code à différents endroits pour faire la même chose, vous devriez envisager de refactoriser le code dans un HOC réutilisable. </p> <p style="text-align:left;">24. Quels sont les avantages de l'utilisation des fonctions fléchées ? </p> <p style="text-align:left;">Réponse : 1. Sécurité de la portée : Avant la fonction flèche, chaque fonction nouvellement créée a sa propre valeur this (dans le constructeur, c'est un nouvel objet ; en mode strict, dans les appels de fonction, ceci n'est pas défini ; si la fonction est appelée une "méthode objet", alors l'objet sous-jacent, etc.), mais pas les fonctions fléchées, elle utilise la valeur this du contexte d'exécution englobant. </p> <p style="text-align:left;">2. Simple : les fonctions fléchées sont faciles à lire et à écrire. </p> <p style="text-align:left;">3. Claire : lorsque tout est une fonction fléchée, n'importe quelle fonction régulière peut être utilisée immédiatement pour définir la portée. Les développeurs peuvent toujours rechercher les instructions de fonction immédiatement supérieures pour voir la valeur de ce </p> <p style="text-align:left;"> 25. Pourquoi est-il recommandé que le paramètre passé à setState soit un rappel au lieu d'un objet ? </p> <p style="text-align:left;">Réponse : Les mises à jour de this.props et this.state pouvant être asynchrones, on ne peut pas se fier à leurs valeurs pour calculer l'état suivant. </p> <p style="text-align:left;">26. En plus de lier cela dans le constructeur, existe-t-il un autre moyen ? </p> <p style="text-align:left;">Réponse : Vous pouvez utiliser des initialiseurs de propriété pour lier correctement les rappels, et create-react-app le prend également en charge par défaut. Dans les rappels, vous pouvez utiliser des fonctions fléchées, mais le problème est qu'un nouveau rappel est créé à chaque rendu du composant. </p> <p style="text-align:left;">27. Comment empêcher le rendu des composants ? </p> <p style="text-align:left;">Réponse : Le retour de null dans la méthode de rendu du composant n'affectera pas la méthode de cycle de vie qui déclenche le composant </p> <p style="text-align:left;">28 Lors du rendu d'une liste, quelle est la clé ? Quel est le but de définir la clé ? </p> <p style="text-align:left;">Réponse : les clés aideront React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés. Les clés doivent être attribuées aux éléments du tableau pour donner à l'élément (DOM) une identité stable. La meilleure façon de choisir une clé est d'utiliser une chaîne qui identifie de manière unique un élément de liste. Souvent, vous utiliserez les ID dans les données comme clés. Lorsque vous ne disposez pas d'ID stables pour les éléments en cours de rendu, vous pouvez utiliser l'index d'élément comme clé pour les éléments rendus, mais cette méthode n'est pas recommandée si les éléments peuvent être rendus. réorganisé. Cela ralentira le nouveau rendu </p> <p style="text-align:left;"> 29. Quel est le but d'appeler super(props) (dans le constructeur) ? </p> <p style="text-align:left;">Réponse : les sous-classes ne peuvent pas l'utiliser avant l'appel de super(). Dans ES2015, les sous-classes doivent appeler super() dans le constructeur. La raison du passage des accessoires à super() est de faciliter l'accès à this.props dans le constructeur (dans les sous-classes). </p> <p style="text-align:left;">30. Qu'est-ce que JSX ? </p> <p style="text-align:left;">Réponse : JSX est une extension de la syntaxe JavaScript et possède toutes les fonctions de JavaScript. JSX produit des "éléments" React et vous pouvez envelopper n'importe quelle expression JavaScript entre accolades et l'intégrer dans JSX. Après la compilation, les expressions JSX deviennent des objets JavaScript normaux, ce qui signifie que vous pouvez utiliser JSX dans des instructions if et des boucles for, l'attribuer à des variables, l'accepter comme argument et le renvoyer à partir de fonctions. </p> <p style="text-align:left;">31Que sont les enfants ? </p> <p style="text-align:left;">Réponse : dans les expressions JSX, le contenu entre une balise d'ouverture (telle que <a>) et une balise de fermeture (telle que </a>) sera traité comme un attribut spécial props.children automatiquement transmis au composant conteneur. </p> <p style="text-align:left;">Cette propriété dispose de nombreuses méthodes disponibles, notamment React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray. </p> <p style="text-align:left;">32. Dans React, qu'est-ce que l'état ? </p> <p style="text-align:left;">Réponse : L'état est similaire aux accessoires, mais il est privé et entièrement contrôlé par le composant lui-même. L'état est essentiellement un objet qui contient des données et détermine la manière dont le composant est rendu. </p> <p style="text-align:left;">33. Quelles raisons vous pousseraient à rompre avec votre dépendance à l'égard de create-react-app ? </p> <p style="text-align:left;">Réponse : Lorsque vous souhaitez configurer les préréglages Webpack ou Babel. </p> <p style="text-align:left;">34. Qu'est-ce que le redux ? </p> <p style="text-align:left;">Réponse : L'idée de base de Redux est de conserver l'intégralité de l'état de l'application dans un seul magasin. Le magasin est un simple objet JavaScript, et le seul moyen de modifier l'état de l'application est de déclencher des actions dans l'application, puis d'écrire des réducteurs pour ces actions afin de modifier l'état. L'ensemble de la transformation de l'état est réalisé dans des réducteurs et ne devrait avoir aucun effet secondaire</p> <p style="text-align:left;">35 Dans Redux, qu'est-ce qu'un magasin ? </p> <p style="text-align:left;">Réponse : Store est un objet javascript qui enregistre l'état de l'ensemble de l'application. Dans le même temps, Store assume également les responsabilités suivantes : </p> <ol> <li>Autoriser l'accès à l'état via getState()</li> <li>Exécuter via dispatch(action) Changer d'état</li> <li>via Subscribe(listener) ) Enregistrez les auditeurs</li> <li>Gérez les notes des auditeurs via la fonction renvoyée par Subscribe(listener)</li> </ol> <p style="text-align:left;">36. </p> <p style="text-align:left;">Réponse : Les actions sont un pur objet javascript, elles doivent avoir un attribut type indiquant le type d'action en cours d'exécution. Essentiellement, une action est la charge utile qui envoie les données de l'application au magasin. </p> <p style="text-align:left;">37. Qu'est-ce qu'un réducteur ? </p> <p style="text-align:left;">Réponse : Un réducteur est une fonction pure qui prend l'état précédent et une action comme paramètres et renvoie l'état suivant. </p> <p style="text-align:left;">38. Quelle est la fonction de Redux Thunk ? </p> <p style="text-align:left;">Réponse : Redux thunk est un middleware qui vous permet d'écrire des créateurs d'actions qui renvoient une fonction au lieu d'une action. Si une certaine condition est remplie, thunk peut être utilisé pour retarder l'envoi d'une action (envoi), ce qui peut gérer l'envoi d'une action asynchrone (envoi). </p> <p style="text-align:left;">39. Qu'est-ce qu'une fonction pure ? </p> <p style="text-align: left;">Réponse : Une fonction pure est une fonction qui ne dépend pas et ne change pas l'état des variables en dehors de sa portée. Cela signifie également qu'une fonction pure renvoie toujours le même résultat pour les mêmes paramètres. </p> <p>Pour plus de contenu lié à la programmation, veuillez faire attention à la colonne <a href="https://www.php.cn/course.html" target="_blank">Introduction à la programmation</a> sur le site Web PHP chinois ! </p><p>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!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Étiquettes associées：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/fr/search?word=react" target="_blank">react</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/fr/search?word=面试题" target="_blank">面试题</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：cnblogs.com</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/fr/faq/457310.html" title="Réagissez aux questions d'entretien de base (partager)"> <span>Article précédent：Réagissez aux questions d'entretien de base (partager)</span> </a> <a href="http://www.php.cn/fr/faq/457313.html" title="Résumé des questions d'entretien React front-end en 2023 (Collection)"> <span>Article suivant：Résumé des questions d'entretien React front-end en 2023 (Collection)</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Déclaration de ce site Web</div> <div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers articles par auteur</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529366.html">Comprendre la sentinelle dans Redis en profondeur</a> </div> <div>2023-04-26 17:59:18</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529362.html">[Organisation et partage] 7 outils de gestion d'état React populaires</a> </div> <div>2023-04-26 17:47:48</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529360.html">Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3</a> </div> <div>2023-04-26 17:41:42</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529358.html">Un article pour parler du contrôle de la mémoire dans Node</a> </div> <div>2023-04-26 17:37:05</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529356.html">Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double !</a> </div> <div>2023-04-26 17:31:25</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/529350.html">Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière !</a> </div> <div>2023-04-26 17:27:32</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/528167.html">Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes</a> </div> <div>2023-04-25 19:57:58</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/528165.html">Un article pour comprendre le modèle singleton en JavaScript</a> </div> <div>2023-04-25 19:53:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/528163.html">En savoir plus sur les tampons dans Node</a> </div> <div>2023-04-25 19:49:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/528161.html">Découvrez comment écrire des tests unitaires dans Vue3</a> </div> <div>2023-04-25 19:41:54</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers numéros</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176395.html" target="_blank" title="Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ?" class="wdcdcTitle">Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ?</a> <a href="http://www.php.cn/fr/wenda/176395.html" class="wdcdcCons">Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 21:28:37</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2257</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176358.html" target="_blank" title="La mise à jour du statut ne fonctionne pas dans React-Native sur Android" class="wdcdcTitle">La mise à jour du statut ne fonctionne pas dans React-Native sur Android</a> <a href="http://www.php.cn/fr/wenda/176358.html" class="wdcdcCons">J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 16:54:10</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>410</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176354.html" target="_blank" title="Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ?" class="wdcdcTitle">Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ?</a> <a href="http://www.php.cn/fr/wenda/176354.html" class="wdcdcCons">J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 16:29:50</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>490</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176353.html" target="_blank" title="Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau" class="wdcdcTitle">Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau</a> <a href="http://www.php.cn/fr/wenda/176353.html" class="wdcdcCons">J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 16:25:39</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>346</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176333.html" target="_blank" title="React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ?" class="wdcdcTitle">React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ?</a> <a href="http://www.php.cn/fr/wenda/176333.html" class="wdcdcCons">Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 13:39:24</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>410</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Rubriques connexes</div> <a href="http://www.php.cn/fr/faq/zt" target="_blank">Plus> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/htmlzmtjcssys"><img src="https://img.php.cn/upload/subject/202407/22/2024072213523036577.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment ajouter du style CSS au HTML" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/htmlzmtjcssys" class="title-a-spanl" title="Comment ajouter du style CSS au HTML"><span>Comment ajouter du style CSS au HTML</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/javascripttyp"><img src="https://img.php.cn/upload/subject/202407/22/2024072213442961207.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Type d'utilisation en JavaScript" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/javascripttyp" class="title-a-spanl" title="Type d'utilisation en JavaScript"><span>Type d'utilisation en JavaScript</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/pzjavayxhj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213540690404.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Configurer l'environnement d'exécution Java" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/pzjavayxhj" class="title-a-spanl" title="Configurer l'environnement d'exécution Java"><span>Configurer l'environnement d'exécution Java</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/documentcooki"><img src="https://img.php.cn/upload/subject/202407/22/2024072213441912791.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre le problème selon lequel document.cookie ne peut pas être obtenu" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/documentcooki" class="title-a-spanl" title="Comment résoudre le problème selon lequel document.cookie ne peut pas être obtenu"><span>Comment résoudre le problème selon lequel document.cookie ne peut pas être obtenu</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/cdncx504cwzmj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212262630638.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre l'erreur 504 dans CDN" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/cdncx504cwzmj" class="title-a-spanl" title="Comment résoudre l'erreur 504 dans CDN"><span>Comment résoudre l'erreur 504 dans CDN</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/ttfhzdds"><img src="https://img.php.cn/upload/subject/202407/22/2024072213245771688.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Jusqu'où ira Ethereum ?" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/ttfhzdds" class="title-a-spanl" title="Jusqu'où ira Ethereum ?"><span>Jusqu'où ira Ethereum ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/noroutehost"><img src="https://img.php.cn/upload/subject/202407/22/2024072214030310683.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre l'absence de route vers l'hôte" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/noroutehost" class="title-a-spanl" title="Comment résoudre l'absence de route vers l'hôte"><span>Comment résoudre l'absence de route vers l'hôte</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/agpjkssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212082788836.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Qu'est-ce que l'interface AGP" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/agpjkssm" class="title-a-spanl" title="Qu'est-ce que l'interface AGP"><span>Qu'est-ce que l'interface AGP</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Recommandations populaires</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="que signifie js" href="http://www.php.cn/fr/faq/482163.html">que signifie js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment convertir une chaîne en tableau en js ?" href="http://www.php.cn/fr/faq/461802.html">Comment convertir une chaîne en tableau en js ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment actualiser la page en utilisant javascript" href="http://www.php.cn/fr/faq/473330.html">Comment actualiser la page en utilisant javascript</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment supprimer un élément dans le tableau js" href="http://www.php.cn/fr/faq/475790.html">Comment supprimer un élément dans le tableau js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment utiliser la fonction sqrt" href="http://www.php.cn/fr/faq/415276.html">Comment utiliser la fonction sqrt</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Tutoriels populaires</div> <a target="_blank" href="http://www.php.cn/fr/course.html">Plus> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/fr/course/265.html" title="Tutoriel vidéo React, de la prise en main à la maîtrise" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625516cf38389365.png" alt="Tutoriel vidéo React, de la prise en main à la maîtrise"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo React, de la prise en main à la maîtrise" href="http://www.php.cn/fr/course/265.html">Tutoriel vidéo React, de la prise en main à la maîtrise</a> <div class="wzrthreerb"> <div>551457 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="265"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/785.html" title="Tutoriel vidéo détaillé sur le routage React" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625e6cf44cef0586.jpg" alt="Tutoriel vidéo détaillé sur le routage React"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo détaillé sur le routage React" href="http://www.php.cn/fr/course/785.html">Tutoriel vidéo détaillé sur le routage React</a> <div class="wzrthreerb"> <div>21315 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="785"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/791.html" title="Tutoriel vidéo approfondi avancé de React Native" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625fa172d47d9787.jpg" alt="Tutoriel vidéo approfondi avancé de React Native"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo approfondi avancé de React Native" href="http://www.php.cn/fr/course/791.html">Tutoriel vidéo approfondi avancé de React Native</a> <div class="wzrthreerb"> <div>28729 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="791"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/manual/view/36311.html" title="Manuel de développement chinois React" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611ddf3e60b255.jpg" alt="Manuel de développement chinois React"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Manuel de développement chinois React" href="http://www.php.cn/fr/manual/view/36311.html">Manuel de développement chinois React</a> <div class="wzrthreerb"> <div>15 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="931"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/734.html" title="Tutoriel vidéo de base de ReactJS" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625e5ee743cc9976.jpg" alt="Tutoriel vidéo de base de ReactJS"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo de base de ReactJS" href="http://www.php.cn/fr/course/734.html">Tutoriel vidéo de base de ReactJS</a> <div class="wzrthreerb"> <div>25352 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="734"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="http://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div >1417399 temps d'étude</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="http://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div >2480262 temps d'étude</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="http://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div >504100 temps d'étude</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Introduction rapide au développement web front-end" href="http://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a> <div class="wzrthreerb"> <div >215327 temps d'étude</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="http://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a> <div class="wzrthreerb"> <div >878112 temps d'étude</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="http://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a> <div class="wzrthreerb"> <div >6476 temps d'étude</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="http://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a> <div class="wzrthreerb"> <div >5083 temps d'étude</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Aller au langage pratique GraphQL" href="http://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a> <div class="wzrthreerb"> <div >4269 temps d'étude</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="http://www.php.cn/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a> <div class="wzrthreerb"> <div >634 temps d'étude</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="http://www.php.cn/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a> <div class="wzrthreerb"> <div >21731 temps d'étude</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Derniers téléchargements</div> <a href="http://www.php.cn/fr/xiazai">Plus> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">effets Web <div></div></div> <div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div> <div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div> <div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="http://www.php.cn/fr/xiazai/js/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="http://www.php.cn/fr/xiazai/js/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="http://www.php.cn/fr/xiazai/js/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="http://www.php.cn/fr/xiazai/js/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="http://www.php.cn/fr/xiazai/js/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="http://www.php.cn/fr/xiazai/js/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="http://www.php.cn/fr/xiazai/js/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="http://www.php.cn/fr/xiazai/js/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3078" target="_blank" title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3077" target="_blank" title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3076" target="_blank" title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3075" target="_blank" title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3074" target="_blank" title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3073" target="_blank" title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3072" target="_blank" title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3071" target="_blank" title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/fr/about/xieyi.html" rel="nofollow" target="_blank" title="À propos de nous" class="cBlack">À propos de nous</a> <a href="http://www.php.cn/fr/about/yinsi.html" rel="nofollow" target="_blank" title="Clause de non-responsabilité" class="cBlack">Clause de non-responsabilité</a> <a href="http://www.php.cn/fr/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1731368704"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>