ReactJS

Sử dụng keys trong reactjs

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Chào các em, hôm nay anh sẽ hướng dẫn mọi người hiểu về keys trong reactjs.

1. Sử dụng keys

React Keys được sử dụng trong react khi chúng ta muốn tạo ra các component động. Keys là giá trị duy nhất để nhận biết và phân biệt các component .

2. Ví dụ keys

Trong ví dụ này chúng ta sẽ tạo Content component với Key có giá trị index (i). Hàm map sẽ tạo ra 3 phần tử Content dựa vào mảng data mà chúng ta tạo trong State. Vì keys là đối tượng duy nhất và không trùng lặp nên trong ví dụ này chúng ta sử dụng index (vị trí) các phần tử trong mảng để gán cho key

Chúng ta có file App.jsx như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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;

Chúng ta có file main.js để chạy như sau

1
2
3
4
5

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

ReactDOM.render(<App/>, document.getElementById('app'));

Khi button được click chúng ta xoá giá trị trong textbox đồng thời focus chuột vào ô textbox.

reactjs

3. Video Demo

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments