Hướng dẫn ReactJS ReactJS tutorial (p11) Bài 11: ReactJS sử dụng Keys trong React

4 229 3
Hướng dẫn ReactJS   ReactJS tutorial (p11) Bài 11: ReactJS  sử dụng Keys trong React

Đang tải... (xem toàn văn)

Thông tin tài liệu

Key được sử dụng trong React khi một component return một mảng phần tử hoặc một danh sách các phần tử. Key giúp react xác định các phần tử trong mảng hoặc danh sách, phần tử nào đươc thêm vào, phần tử nào được update hay remove... Sử dụng Key Giờ chúng ta sẽ tạo một component tên là Content với unique index( tạm dịch là chỉ mục duy nhất) là i được chứa trong App component. Trong component App, function map sẽ tạo ra 3 element từ mảng data chứa trong state. Sau đó ta sẽ gán Key cho từng element đó bằng với i ở trên, lưu ý là Key dùng để định danh các phần tử nên giá trị của nó cần duy nhất, không được trùng. Khá rối nhỉ , các bạn xem ví dụ để hiểu rõ hơn. Các bạn xem ở đây nếu không biết function map.

... Index.js import React from 'react' ; import ReactDOM from 'react- dom'; import App from './App.jsx'; ReactDOM.render(, document.getElementById('app')); Kết ta được: Các bạn vận dụng kiến thức... ta được: Các bạn vận dụng kiến thức trước để update thêm này, tìm cách thêm xóa sửa component Content React sử dụng key để xác định component bị tác động Nếu bạn bỏ thành phần key={i} lúc render... )} ); } } class Content extends React. Component { render() { return ( {this.props.componentData.component} {this.props.componentData.id}

Ngày đăng: 03/04/2018, 17:34

Từ khóa liên quan

Mục lục

  • Bài 11: ReactJS - sử dụng Keys trong React

    • Sử dụng Key

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan