Reactでリストをループする方法

React ループ リスト メソッド: 1. マップ ループ、コードは [let MyDom =arr.map((item,index)=>]; 2. for ループ、コードは [for(var i = 0;i

• この方法は、すべてのブランドのコンピューターに適しています

#Reactループリストメソッド:

1.mapループ

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

Traversalはページ、コンソールに表示可能しかし、エラーが報告されました。その理由は、配列に対する後続の操作を容易にするために一意のキーを設定する必要があるためです。

キー値を追加した後は、エラーは報告されません。

 <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>

「次の行で Enter キーを押すだけで簡単ですか?」に戻った後にコードを変更したい場合は、

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

もちろん、使いやすいわけではありません。解決策は、() を使用して要素をラップすることです。

したがって、どのように変更しても、ループ内で改行なしで

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

2.for を追加するという習慣を身に付けてください。

 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.for ループ

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

4.for each ループ

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

関連する無料学習の推奨事項:

javascript

(ビデオ)

以上がReactでリストをループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。