Bedingtes Rendern
Das bedingte Rendern ist relativ einfach. Lesen Sie einfach die entsprechende Dokumentation auf der offiziellen Website .
Liste
Rendern Sie die Liste per Karte:
class HelloWorld extends React.Component {
constructor(props){
super(props);
this.state = ({
arr: [1,2,3,4]
})
}
render(){
return (
<ul>
{
this.state.arr.map(item=>(
<li>li_{item}</li>
))
}
</ul>
)
}
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));
Schlüssel
Wir haben einen Fehler gefunden, Each child in a list should have a unique "key" prop. der bedeutet, dass jedes Element, das wir durchlaufen, einen eindeutigen Schlüssel haben sollte. Dies ist dasselbe wie bei Vue und wird zur Unterscheidung von Komponenten verwendet, wenn React unten gerendert wird. Grundsätzlich können wir den Index eines Arrays nicht als verwenden ein Schlüssel. Da sich das Hinzufügen und Löschen des Arrays auf den Index auswirkt, sollte ein eindeutiger Wert für die Daten bereitgestellt werden. Jedes Element, das wir
hier bestimmen , ist eindeutig und wir können den Wert als Schlüssel verwenden. In der tatsächlichen Entwicklung ist dies der Fall Es wird empfohlen, die ID des Array-Elementobjekts als Schlüssel zu verwenden.arr
class HelloWorld extends React.Component {
constructor(props){
super(props);
this.state = ({
arr: [1,2,3,4]
})
}
render(){
return (
<ul>
{
this.state.arr.map(item=>(
<li key={item}>li_{item}</li>
))
}
</ul>
)
}
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));