Comment boucler une liste en réaction

Méthode de liste de boucles React : 1. boucle map, le code est [let MyDom =arr.map((item,index)=>] ; 2. boucle for, le code est [for(var i = 0;i

Méthode de liste de boucles React :

1.map loop

• <script type="text/babel">
          let arr=["吃饭","睡觉","喝水"]
          let MyDom =arr.map((item,index)=>{
              return <p>{item}</p>
          })
          ReactDOM.render(MyDom,document.getElementById("demoReact"))
      </script>

  Le parcours peut être affiché sur la page, console Mais une erreur a été signalée La raison est que vous devez définir une clé unique pour faciliter le fonctionnement du tableau plus tard

Après avoir ajouté la valeur de la clé, aucune erreur. sera signalé

 <script type="text/babel">
        let arr=["吃饭","睡觉","喝水"]
        let MyDom =arr.map((item,index)=>{
        //key值必须是独一无二的
            return <p key={index}>{item}</p>
        })
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

Si vous souhaitez modifier le code après le retour à Est-il facile de simplement saisir la ligne suivante ?

//直接回车换行
return 
<p key={index}>{item}</p>

Bien sûr, ce n'est pas facile, la solution est d'utiliser () pour envelopper l'élément, et il peut être affiché normalement après une nouvelle ligne

Alors développez une habitude : peu importe comment vous modifiez Add () sans sauts de ligne

//用括号包裹住换行元素
 let MyDom =arr.map((item,index)=>{
            return (
                <p key={index}>{item}</p>)
        })

2 pour. en boucle

 function fun(){
            let newarr=[];
            for(let index in arr){
               newarr.push(<p key={index}>{arr[index]}</p>)
            }
            return newarr;
        }
        
        ReactDOM.render(fun(),document.getElementById("demoReact"))

3. pour la boucle

 function fun(){
            let newarr=[];
            for(var i=0;i<arr.length;i++){
               newarr.push(<p key={i}>{arr[i]}</p>)
            }
            return newarr;
        }

4.pour chaque boucle

 function fun(){
            arr.forEach(a=>{
             console.log(a);
            })
        }

Recommandations d'apprentissage gratuites associées :

javascript

(vidéo)

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!