So schleifen Sie eine Liste in React

So schleifen Sie eine Liste in React: 1. Map-Schleife, der Code ist [let MyDom =arr.map((item,index)=>]; 2. for-Schleife, der Code ist [for(var i= 0;i< arr.length;i++)].

• Diese Methode ist für alle Computermarken geeignet

  Das Durchlaufen kann auf der Seite angezeigt werden, aber die Konsole meldet einen Fehler. Der Grund dafür ist, dass Sie einen eindeutigen Schlüssel festlegen müssen, um den Betrieb des Arrays zu erleichtern. Nach dem Hinzufügen des Schlüsselwerts wird kein Fehler angezeigt gemeldet.

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

Wenn der Code nach der Rückkehr in die nächste Zeile geändert werden soll, ist es einfach, einfach die Eingabetaste zu drücken?

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

Natürlich ist es nicht einfach, das Element zu verwenden. und es kann nach einem Zeilenumbruch normal angezeigt werden

Entwickeln Sie also eine Gewohnheit: Fügen Sie () hinzu, unabhängig von Zeilenumbrüchen oder nicht .für jede Schleife

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

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonSo schleifen Sie eine Liste in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!