ReactJS Grundlagen-Tutorial

ReactJS Keys

keysReact ist nützlich, wenn dynamisch erstellte Komponenten oder Benutzerlisten geändert werden. EinstellenkeyDer Wert hält den geänderten Komponenten eine eindeutige Identifikation bei.

Verwenden Sie Keys

Lassen Sie uns dynamisch Content-Elemente mit einzigartigen Indizes (i) erstellen. Die map-Funktion erstellt drei Elemente aus dem Datenarray. Da der Schlüsselwert für jedes Element einzigartig sein muss, zuweisen wir jedem erstellten Element i als Schlüssel.

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

For each element's key value, we will get the following result.

If we add or delete some elements in the future or change the order of dynamically created elements, React will use thesekeyUse values to track each element.

ReactJS Router ReactJS Refs