ホームページ > 記事 > ウェブフロントエンド > Reactでリストをループする方法
React ループ リスト メソッド: 1. マップ ループ、コードは [let MyDom =arr.map((item,index)=>]; 2. for ループ、コードは [for(var i = 0;i
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 サイトの他の関連記事を参照してください。