Maison >interface Web >js tutoriel >Comment boucler une liste en réaction

Comment boucler une liste en réaction

coldplay.xixi
coldplay.xixioriginal
2020-11-26 16:48:325503parcourir

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 :

Comment boucler une liste en réaction

    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!

Déclaration:
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

Articles Liés

Voir plus