Tutoriel de base ReactJS

Keys ReactJS

keysReact est très utile lorsque l'on utilise des composants créés dynamiquement ou que la liste de l'utilisateur change. DéfinirkeyLa valeur maintiendra l'identité unique du composant modifié.

Utilisation des Keys

Laissons-nous créer dynamiquement des éléments de contenu avec un index unique (i). La fonction map créera trois éléments. Comme la clé doit être unique pour chaque élément, nous allons attribuer i comme clé pour chaque élément créé.

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'));

Pour chaque valeur de clé de l'élément, nous obtiendrons le résultat suivant.

Si nous ajoutons ou supprimons des éléments à l'avenir ou si nous changeons l'ordre des éléments créés dynamiquement, React utilisera ceskeyPour suivre chaque élément.

Router ReactJS Refs ReactJS