📌  相关文章
📜  ReactJS-键

📅  最后修改于: 2020-10-20 04:50:35             🧑  作者: Mango

当使用动态创建的组件或用户更改列表时，React键非常有用。设置键值将使更改后的组件保持唯一标识。

使用按键

让我们动态创建具有唯一索引（i）的Content元素。 map函数将从数据数组中创建三个元素。由于键值对于每个元素都必须是唯一的，因此我们将为每个创建的元素分配i作为键。

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 (
         

            

               {this.state.data.map((dynamicComponent, i) => )}
            

         

      );
   }
}
class Content extends React.Component {
   render() {
      return (
         

            
{this.props.componentData.component}

            
{this.props.componentData.id}

         

      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

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

反应键示例

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