Tutorial di base ReactJS

KeysReactJS

chiaviReact è molto utile quando si utilizzano componenti creati dinamicamente o quando l'utente modifica l'elenco. ImpostazionechiaveIl valore renderà il componente modificato mantenere un'identificazione unica.

Utilizzo delle chiavi

Creiamo dinamicamente elementi Content con un'indice univoco (i). La funzione map creerà tre elementi dall'array di dati. Poiché il valore chiave deve essere unico per ogni elemento, assegniamo a ciascun elemento creato l'indice i come chiave.

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　constructor()　{
　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'First...',
　　　　　　　　　　　　　　　id: 1
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Second...',
　　　　　　　　　　　　　　　id: 2
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Third...',
　　　　　　　　　　　　　　　id: 3
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　{this.state.data.map((dynamicComponent,　i)　=>　<Content　
　　　　　　　　　　　　　　　　　　key　=　{i}　componentData　=　{dynamicComponent}/>)}
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<div>{this.props.componentData.component}</div>
　　　　　　　　　　　　<div>{this.props.componentData.id}</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>,　document.getElementById('app'));

对于每个元素的键值，我们将获得以下结果。

如果我们将来增加或删除一些元素或更改动态创建的元素的顺序，React将使用这些chiave值来跟踪每个元素。

RouterReactJS RefsReactJS