Maison > interface Web > Questions et réponses frontales > Comment utiliser la méthode React Children

Comment utiliser la méthode React Children

藏色散人
Libérer: 2023-01-04 16:41:59
original
2318 Les gens l'ont consulté

La méthode React Children est utilisée pour traiter "this.props.children". Ses méthodes de traitement sont : 1. React.Children.map(); 2. React.Children.forEach(); () ; 4. React.Children.only(); 5. React.Children.toArray().

Comment utiliser la méthode React Children

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment utiliser la méthode React Children ?

Explication détaillée de React.Children

React.Children fournit des outils pour traiter this.props.children this.props.children peut être n'importe quelle donnée (composant, chaîne, fonction, etc.). React.children a 5 méthodes : React.Children.map(), React.Children.forEach(), React.Children.count(), React.Children.only(), React.Children.toArray(), généralement avec React .cloneElement() est utilisé conjointement avec this.props.children.

  • React.Children.map()

React.Children.map() est quelque peu similaire à Array.prototype.map(). Cette méthode renvoie un tableau si children est un tableau, ou null ou undefined s'il est nul ou indéfini. Le premier paramètre est les enfants, qui sont les fonctions 'hello world!' et () =>

2333

Le deuxième paramètre est la fonction. Le premier paramètre de fonction est chaque élément parcouru et le deuxième paramètre est l'index correspondant.
function Father({children}) {
    return(
      <div>
      {React.Children.map(children, (child, index) => {
          ...
      })}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>
Copier après la connexion
  • React.Children.forEach()

  Identique à React.Children.map(), la différence est qu'il n'y a pas de retour.

  • React.Children.count()

React.Children.count() est utilisé pour compter et renvoyer le nombre d'enfants. N'utilisez pas children.length pour compter. S'il n'y a que « hello world ! » dans le composant Father, 12 sera renvoyé, ce qui est évidemment un résultat incorrect.

function Father({children}) {
    return(
      <div>
      {React.Children.count(children)}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>
Copier après la connexion
  • React.Children.only()

Vérifiez qu'il n'y a qu'un seul enfant parmi les enfants et rendez-le. Sinon, cette méthode génère une erreur.

function Father({children}) {
    return(
      <div>
      {React.Children.only(children)}
      </div>    
    )        
 }
<Father>
    hello world!
</Father>
Copier après la connexion
  • React.Children.toArray()

Convertir les enfants en Array Vous devez utiliser

function Father({children}) {
    let children1 = React.Children.toArray(children);
    return(
      <div>
      {children1.sort().join(&#39; &#39;)}
      </div>    
    )        
 }
<Father>
    {&#39;ccc&#39;}
    {&#39;aaa&#39;}
    {&#39;bbb&#39;}
</Father>
//渲染结果: aaa bbb ccc
Copier après la connexion

lors du tri des enfants. Si vous n'utilisez pas la méthode React.Children.toArray(), écrivez simplement. children.sort() directement. Une erreur sera signalée

Comment utiliser la méthode React Children

Exemple :

Par exemple, s'il existe une telle exigence, il faut 3 étapes pour terminer une opération. Chaque fois qu'une étape est terminée, l'indicateur correspondant. la lumière s’allumera.

index.jsx

import * as React from &#39;react&#39;;
import * as ReactDOM from &#39;react-dom&#39;;
import {Steps, Step} from &#39;./Steps&#39;;
function App() {
    return (
        <div>
        <Steps currentStep={1}>  //完成相应的步骤,改变currentStep的值。如,完成第一步currentStep赋值为1,完成第二部赋值为2
            <Step />
            <Step />
            <Step />
            </Steps>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));
Copier après la connexion

Steps.jsx

import * as React from &#39;react&#39;;
import &#39;./step.less&#39;;
function Steps({currentStep, children}) {
    return (
        <div>
         {React.Children.map(children, (child, index) => {
            return React.cloneElement(child, {
              index: index,
              currentStep: currentStep
            });
         })}
      </div>
    );
}
function Step({index, currentStep}: any) {
    return <div className={`indicator${currentStep >= index + 1 ? &#39; active&#39; : &#39;&#39;}`} />;
}
export {Steps, Step};
Copier après la connexion

steps.less

.indicator { display: inline-block; width: 100px; height: 20px; margin-right: 10px; margin-top: 200px; background: #f3f3f3; &.active {
    background: orange;
  }
Copier après la connexion

Apprentissage recommandé : "tutoriel vidéo React"

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal