ReactJS: Cách tùy chỉnh component với props

Giới thiệu

Trong bài hướng dẫn này, bạn sẽ tạo các component tùy chỉnh bằng cách truyền các props cho component của bạn. Props là các đối số mà bạn cung cấp cho một phần tử JSX. Chúng trông giống như các props HTML tiêu chuẩn, nhưng chúng không được định nghĩa trước và có thể có nhiều kiểu dữ liệu JavaScript khác nhau bao gồm số, chuỗi, hàm, mảng và thậm chí cả các component React khác. Các component tùy chỉnh của bạn có thể sử dụng props để hiển thị dữ liệu hoặc sử dụng dữ liệu để làm cho các component tương tác. Props là một phần quan trọng trong việc tạo ra các component có thể thích ứng với các tình huống khác nhau và tìm hiểu về chúng sẽ cung cấp cho bạn công cụ để phát triển các component tùy chỉnh có thể xử lý các tình huống độc đáo.

Sau khi thêm props vào component của mình, bạn sẽ sử dụng PropTypes dể xác định loại dữ liệu mà bạn mong đợi một component nhận được. PropTypes là một hệ thống kiểu đơn giản để kiểm tra xem dữ liệu có khớp với kiểu mong đợi trong thời gian chạy hay không. Chúng đóng vai trò vừa là tài liệu hướng dẫn vừa là công cụ kiểm tra lỗi sẽ giúp ứng dụng của bạn có thể dự đoán được khi nó mở rộng quy mô.

Đến cuối hướng dẫn, bạn sẽ sử dụng nhiều loại props để xây dựng một ứng dụng nhỏ lấy một mảng dữ liệu động vật và hiển thị thông tin, bao gồm tên, tên khoa học, kích thước, chế độ ăn uống và thông tin bổ sung.

Lưu ý : Bước đầu tiên thiết lập một dự án trống mà bạn sẽ xây dựng bài tập hướng dẫn. Nếu bạn đã có một dự án làm việc và muốn trực tiếp làm việc với props, hãy bắt đầu với Bước 2.

Bước 1 – Tạo một dự án trống

Trong bước này, bạn sẽ tạo một dự án mới bằng Create React App. Sau đó, bạn sẽ xóa dự án mẫu và các tệp liên quan được cài đặt khi bạn khởi động dự án. Cuối cùng, bạn sẽ tạo một cấu trúc tệp đơn giản để tổ chức các thành phần của mình.

Để bắt đầu, hãy thực hiện một dự án mới. Trong dòng lệnh của bạn, hãy chạy tập lệnh sau để cài đặt một dự án mới bằng cách sử dụng create-react-app:

npx create-react-app 

prop-tutorial

Sau đó hãy chuyển đến thư mục prop-tutorial:​

cd

prop-tutorial

Tiếp theo bạn khởi động app với lệnh:

npm

start

Khi đó bạn sẽ nhận được trang web.

Bạn sẽ xây dựng một tập hợp các component tùy chỉnh hoàn toàn mới. Bạn sẽ bắt đầu bằng cách xóa một số mã soạn sẵn để bạn có thể có một dự án trống.

Để bắt đầu, hãy mở src/App.js, sau đó bạn hãy update file để nó chỉ còn như sau:

import

'./App.css'

;

function

App

(

)

{

return

<

>

<

/

>

;

}

export

default

App

;

Tiếp theo bạn tạo một terminal mới.

Xóa file logo.svg đi với lệnh:

rm

src/logo.svg

Sau đó quay lại trang web bạn sẽ thấy nó không hiển thị gì.

Tiếp theo, bạn tạo thư mục components trong src với lệnh sau:

mkdir

src/components

Mỗi component sẽ có thư mục riêng để lưu trữ tệp thành phần cùng với CSS, hình ảnh nếu có và các test.

Tạo một thư mục cho component App:

mkdir

src/components/App

Di chuyển các file của App vào thư mục này:

mv

src/App.* src/components/App

Mở file index.js ra và thay đổi như phần đánh dấu dưới đây:

import

ReactDOM

from

'react-dom'

;

import

'./index.css'

;

import

App

from

'.

/components/App

/App'

;

import

*

as

serviceWorker

from

'./serviceWorker'

;

ReactDOM

.

render

(

<

React

.

StrictMode

>

<

App

/

>

<

/

React

.

StrictMode

>

,

document

.

getElementById

(

'root'

)

)

;

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker

.

unregister

(

)

;

Lưu lại và quay lại trang web và refresh lại, bạn sẽ thấy trang web vẫn hoạt động bình thường.

Bước 2 – Xây dựng các component động với props

Trong bước này, bạn sẽ tạo một component sẽ thay đổi dựa trên thông tin đầu vào được gọi là props. Đạo cụ là các đối số mà bạn chuyển cho một hàm hoặc lớp, nhưng vì các thành phần của bạn được chuyển đổi thành các đối tượng giống HTML với JSX, bạn sẽ chuyển các đạo cụ giống như chúng là các thuộc tính HTML. Không giống như các phần tử HTML, bạn có thể truyền nhiều kiểu dữ liệu khác nhau, từ chuỗi, đến mảng, đến đối tượng và thậm chí cả hàm.

Tại đây bạn sẽ tạo một thành phần hiển thị thông tin về động vật. Thành phần này sẽ lấy tên và tên khoa học của động vật dưới dạng chuỗi, kích thước dưới dạng số nguyên, chế độ ăn uống dưới dạng một mảng chuỗi và thông tin bổ sung dưới dạng đối tượng. Bạn sẽ chuyển thông tin đến thành phần mới dưới dạng đạo cụ và sử dụng thông tin đó trong thành phần của mình.

Đến cuối bước này, bạn sẽ có một thành phần tùy chỉnh sẽ sử dụng các đạo cụ khác nhau. Bạn cũng sẽ sử dụng lại thành phần để hiển thị một mảng dữ liệu bằng một thành phần chung.

Thêm dữ liệu

Đầu tiên, bạn cần một số dữ liệu mẫu. Tạo một file data.js trong thư mục src/App. Sau đó mở file data.js ra và đưa vào dữ liệu sau (đây là một mảng các đối tượng):

export

default

[

{

name

:

'Lion'

,

scientificName

:

'Panthero leo'

,

size

:

140

,

diet

:

[

'meat'

]

,

}

,

{

name

:

'Gorilla'

,

scientificName

:

'Gorilla beringei'

,

size

:

205

,

diet

:

[

'plants'

,

'insects'

]

,

additional

:

{

notes

:

'This is the eastern gorilla. There is also a western gorilla that is a different species.'

}

}

,

{

name

:

'Zebra'

,

scientificName

:

'Equus quagga'

,

size

:

322

,

diet

:

[

'plants'

]

,

additional

:

{

notes

:

'There are three different species of zebra.'

,

link

:

'https://en.wikipedia.org/wiki/Zebra'

}

}

]

Mảng đối tượng trên chứa nhiều loại dữ liệu và sẽ cho bạn cơ hội thử nhiều loại props. Mỗi đối tượng là một động vật riêng biệt với tên động vật, tên khoa học, kích thước, chế độ ăn uống và một trường tùy chọn được gọi là trường additional sẽ chứa các liên kết hoặc ghi chú. Trong file dữ liệu này bạn cũng xuất mảng dưới dạng default. Bạn hãy nhớ lưu lại file nhé.

Tạo các component

Tiếp theo, tạo một component giữ chỗ được gọi AnimalCard. Component này cuối cùng sẽ lấy props và hiển thị dữ liệu.

Đầu tiên, tạo một thư mục có tên AnimalCard nằm trong src/components sau đó tạo một file JS có tên src/components/AnimalCard/AnimalCard.js và một file CSS có tên src/components/AnimalCard/AnimalCard.css.

Mở file AnimalCard.js ra và thêm vào đoạn code sau:

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

)

{

return

<

h2

>

Animal

<

/

h2

>

}

Bạn hãy lưu file lại.

Tiếp theo bạn mở file App.js ra, import dữ liệu và component, lấy từng phần tử mảng và trả về component cho mỗi phần tử mảng:

import

data

from

'./data'

;

import

AnimalCard

from

'../AnimalCard/AnimalCard'

;

import

'./App.css'

;

function

App

(

)

{

return

(

<

div className

=

"wrapper"

>

<

h1

>

Animals

<

/

h1

>

{

data

.

map

(

animal

=>

(

<

AnimalCard   key

=

{

animal

.

name

}  

/

>

)

)

}

<

/

div

>

)

}

export

default

App

;

Lưu file lại. Ở đây, bạn sử dụng phương thức mảng .map() để lặp lại dữ liệu. Ngoài việc thêm vòng lặp này, bạn cũng có một thẻ div bao ngoài với một class là wrapper mà bạn sẽ sử dụng để tạo style và một thẻ <h1> để gắn nhãn cho dự án của bạn.

Quay lại trang web và refresh và bạn sẽ thấy kết quả:

Tiếp theo, ta mở file App.css ra và đưa vào đoạn code CSS sau:

.wrapper

{

display

:

flex

;

flex-wrap

:

wrap

;

justify-content

:

space-between

;

padding

:

20

px

;

}

.wrapper h1

{

text-align

:

center

;

width

:

100

%

;

}

Lưu lại và quay lại trang web ta sẽ thấy kết quả hiển thị dạng như sau:

Thêm props

Bây giờ bạn đã thiết lập được các components, bạn có thể thêm prop đầu tiên của mình. Khi bạn lặp lại dữ liệu, bạn có quyền truy cập vào từng đối tượng và thuộc tính trong mảng data. Bạn sẽ thêm từng phần dữ liệu vào mỗi prop riêng biệt mà sau đó bạn sẽ sử dụng trong component AnimalCard của bạn.

Mở App.js ra và thêm một prop name vào AnimalCard như sau:

... function

App

(

)

{

return

(

<

div className

=

"wrapper"

>

<

h1

>

Animals

<

/

h1

>

{

data

.

map

(

animal

=>

(

<

AnimalCard key

=

{

animal

.

name

}

name

=

{

animal

.

name

}

/

>

)

)

}

<

/

div

>

)

}

export

default

App

;

Lưu lại file. Prop name trông giống như một thuộc tính HTML tiêu chuẩn, nhưng thay vì một chuỗi, bạn sẽ truyền thuộc tính name từ đối tượng animal trong cặp {}.

Bây giờ bạn đã truyền một prop cho component mới, và tiếp theo ta sẽ sử dụng nó. Mở file AnimalCard.js:

Tất cả các prop mà bạn truyền vào component được thu thập vào một đối tượng là đối số đầu tiên của hàm của bạn. Cấu trúc lại đối tượng để lấy ra các prop riêng lẻ:

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

props

)

{

const

{

name

}

=

props

;

return

(

<

h2

>

{

name

}

<

/

h2

>

)

;

}

Lưu ý rằng bạn không cần phải cấu trúc lại một giá đỡ để sử dụng nó, nhưng đây là một phương pháp hữu ích để xử lý dữ liệu mẫu trong hướng dẫn này.

Sau khi bạn cấu trúc lại đối tượng, bạn có thể sử dụng các phần dữ liệu riêng lẻ. Trong trường hợp này, bạn sẽ sử dụng thẻ tiêu đề <h2> bao giá trị bằng cặp ngoặc xoắn {} để React biết để hiểu nó là JavaScript.

Bạn cũng có thể sử dụng một thuộc tính trên đối tượng prop bằng cách sử dụng ký hiệu dấu chấm, ví dụ như <h2>{props.title}</h2>. Ưu điểm của việc cấu trúc lại là bạn có thể thu thập các prop không sử dụng và sử dụng toán tử phần còn lại của đối tượng.

Lưu lại và quay lại trang web và refresh bạn sẽ thấy tên cụ thể cho từng loài động vật thay vì trình giữ chỗ.

Thuộc tính name là một chuỗi, nhưng các prop có thể là bất kỳ kiểu dữ liệu nào mà bạn có thể truyền cho một hàm JavaScript. Để thấy được điều này thì ta sẽ sử dụng tiếp phần còn lại của dữ liệu.

Mở file App.js ra và thêm các prop sau: scientificNamesizediet, additional. Những dữ liệu này lần lượt có kiểu là string, integer, array, và object:

...

function

App

(

)

{

return

(

<

div className

=

"wrapper"

>

<

h1

>

Animals

<

/

h1

>

{

data

.

map

(

animal

=>

(

<

AnimalCard

additional

=

{

animal

.

additional

}

diet

=

{

animal

.

diet

}

key

=

{

animal

.

name

}

name

=

{

animal

.

name

}

scientificName

=

{

animal

.

scientificName

}

size

=

{

animal

.

size

}

/

>

)

)

}

<

/

div

>

)

}

export

default

App

;

Vì bạn đang tạo một đối tượng, bạn có thể thêm chúng theo bất kỳ thứ tự nào bạn muốn. Việc sắp xếp thứ tự chữ cái giúp bạn dễ dàng đọc lướt qua danh sách các prop hơn, đặc biệt là trong trường hợp lượng dữ liệu lớn. Bạn cũng có thể thêm chúng trên cùng một dòng nhưng sẽ khó đọc hơn.

Lưu file App.js lại.

Mở file AnimalCard.js ra sau đó hủy cấu trúc các prop trong danh sách tham số của hàm và sử dụng dữ liệu trong component:

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

additional

,

diet

,

name

,

scientificName

,

size

}

)

{

return

(

<

div

>

<

h2

>

{

name

}

<

/

h2

>

<

h3

>

{

scientificName

}

<

/

h3

>

<

h4

>

{

size

}

kg

<

/

h4

>

<

div

>

{

diet

.

join

(

', '

)

}

.

<

/

div

>

<

/

div

>

)

;

}

Trong đoạn code trên, sau khi lấy dữ liệu ra, bạn có thể thêm vào scientificName và size vào các thẻ tiêu đề, nhưng bạn sẽ cần chuyển mảng (trong trường hợp này là diet) thành một chuỗi để React có thể hiển thị nó trên trang. Bạn có thể làm điều đó bằng phương thức join(', '), sẽ tạo một danh sách được phân tách bằng dấu phẩy.

Lưu lại và quay lại trình duyệt sau đó refresh lại trang bạn sẽ thấy kết quả là dữ liệu được hiển thị có cấu trúc:

Bạn có thể tạo một danh sách tương tự với đối tượng additional, nhưng thay vào đó hãy thêm một hàm để thông báo người dùng về dữ liệu. Điều này sẽ cho bạn cơ hội truyền các hàm làm prop và sau đó sử dụng dữ liệu bên trong một component khi bạn gọi một hàm.

Mở App.js ra và tạo một hàm có tên showAdditionalData dùng để chuyển đối tượng thành chuỗi và hiển thị nó trong thông báo (alert).

...

function

showAdditional

(

additional

)

{

const

alertInformation

=

Object

.

entries

(

additional

)

.

map

(

information

=>

`

${

information

[

0

]

}

:

${

information

[

1

]

}

`

)

.

join

(

'\n'

)

;

alert

(

alertInformation

)

}

;

function

App

(

)

{

return

(

<

div className

=

"wrapper"

>

<

h1

>

Animals

<

/

h1

>

{

data

.

map

(

animal

=>

(

<

AnimalCard additional

=

{

animal

.

additional

}

diet

=

{

animal

.

diet

}

key

=

{

animal

.

name

}

name

=

{

animal

.

name

}

scientificName

=

{

animal

.

scientificName

}

showAdditional

=

{

showAdditional

}

size

=

{

animal

.

size

}

/

>

)

)

}

<

/

div

>

)

}

export

default

App

;

Hàm showAdditional sẽ chuyển đổi đối tượng thành một mảng các cặp trong đó mục đầu tiên là khóa và mục thứ hai là giá trị. Sau đó, nó ánh xạ dữ liệu chuyển đổi cặp khóa thành một chuỗi. Sau đó, nó nối chúng với một dấu ngắt dòng (\n) trước khi chuyển chuỗi hoàn chỉnh cho hàm alert().

Vì JavaScript có thể chấp nhận các hàm làm đối số, nên React cũng có thể chấp nhận các hàm làm prop. Do đó, bạn có thể truyền showAdditional đến AnimalCard như một prop được gọi là showAdditional.

Lưu file App.js lại.

Mở AnimalCard.js ra, kéo hàm showAdditional từ đối tượng props, sau đó tạo <button>với một sự kiện onClick để gọi hàm với đối tượng additional:

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

additional

,

diet

,

name

,

scientificName

,

showAdditional

,

size

}

)

{

return

(

<

div

>

<

h2

>

{

name

}

<

/

h2

>

<

h3

>

{

scientificName

}

<

/

h3

>

<

h4

>

{

size

}

kg

<

/

h4

>

<

div

>

{

diet

.

join

(

', '

)

}

.

<

/

div

>

<

button onClick

=

{

(

)

=>

showAdditional

(

additional

)

}

>

More Info

<

/

button

>

<

/

div

>

)

;

}

Lưu file lại và quay lại trình duyệt rồi refresh lại trang, bạn sẽ thấy phía dưới xuất hiện các nút More info. Bạn nhấn thử vào nút More info của Gorilla hoặc Zebra bạn sẽ thấy xuất hiện một alert với các thông tin bổ sung.

Nhưng nếu bạn nhấn nút More info của Lion bạn sẽ thấy xuất hiện lỗi. Đó là bởi vì không có thông tin bổ sung nào cho Lion (trong file data.js thì đối tượng có name là Lion không có thuộc tính additional). Ta sẽ sửa lỗi này ở Bước 3.

Cuối cùng, thêm một số style cho <AnimalCard>. Bạn mở file AnimalCard.js và thêm className với animal-wrapper vào thẻ div như sau:

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

additional

,

diet

,

name

,

scientificName

,

showAdditional

,

size

}

)

{

return

(

<

div

className

=

"animal-wrapper"

>

<

h2

>

{

name

}

<

/

h2

>

<

h3

>

{

scientificName

}

<

/

h3

>

<

h4

>

{

size

}

kg

<

/

h4

>

<

div

>

{

diet

.

join

(

', '

)

}

.

<

/

div

>

<

button onClick

=

{

(

)

=>

showAdditional

(

additional

)

}

>

More Info

<

/

button

>

<

/

div

>

)

;

}

Lưu file lại rồi mở file AnimalCard.css ra và đưa vào đoạn mã CSS sau:

.animal-wrapper

{

border

:

solid

black

1

px

;

margin

:

10

px

;

padding

:

10

px

;

width

:

200

px

;

}

.animal-wrapper button

{

font-size

:

1

em

;

border

:

solid

black

1

px

;

padding

:

10

;

background

:

none

;

cursor

:

pointer

;

margin

:

10

px

0

;

}

Lưu lại và quay lại refresh lại trang web bạn sẽ thấy kết quả như sau:

Như vậy đến đây thì bạn đã tạo được hai component tùy chỉnh là App và AnimalCard. Bạn đã truyền dữ liệu từ component App cho component AnimalCard bằng cách sử dụng các prop. Các prop bao gồm nhiều loại dữ liệu, chẳng hạn như chuỗi, số nguyên, mảng, đối tượng và hàm. Trong component thứ hai, bạn đã sử dụng các prop để tạo một component động bằng JSX.

Trong bước tiếp theo, bạn sẽ sử dụng một hệ thống kiểu được gọi prop-types để chỉ định cấu trúc mà component của bạn mong đợi sẽ thấy, điều này sẽ tạo ra khả năng dự đoán trong ứng dụng của bạn và ngăn chặn lỗi.

Bước 3 – Tạo các prop có thể đoán trước sử dụng PropTypes và defaultProps

Trong bước này, bạn sẽ thêm hệ thống kiểu nhẹ vào các component của mình với PropTypesPropTypes hoạt động giống như các hệ thống kiểu khác bằng cách định nghĩa tường minh loại dữ liệu bạn mong đợi nhận được cho mỗi prop. Chúng cũng cung cấp cho bạn cơ hội định nghĩa dữ liệu mặc định trong trường hợp không phải lúc nào cũng yêu cầu phần hỗ trợ. Không giống như hầu hết các hệ thống kiểu, PropTypes là một kiểm tra thời gian chạy (runtime), vì vậy nếu prop không khớp với kiểu, mã sẽ vẫn biên dịch, nhưng cũng sẽ hiển thị lỗi console.

Khi kết thúc bước này, bạn sẽ thêm khả năng dự đoán vào component tùy chỉnh của mình bằng cách định nghĩa kiểu cho từng prop. Điều này sẽ đảm bảo rằng người tiếp theo làm việc trên component sẽ có ý tưởng rõ ràng về cấu trúc của dữ liệu mà component sẽ cần.

Gói prop-types đã được tích hợp trong quá trình cài đặt với Create Reate App rồi, vì vậy để sử dụng nó thì đơn giản là bạn chỉ cần import nó vào component của bạn.

Mở file AnimalCard.js ra rồi import PropTypes từ prop-types:

import

PropTypes

from

'prop-types'

;

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

...

}

Trong JavaScript, các hàm là các đối tượng, có nghĩa là bạn có thể thêm các thuộc tính bằng cách sử dụng cú pháp dấu chấm. Bây giờ ta thêm vào AnimalCard.js PropTypes sau:

import

PropTypes

from

'prop-types'

;

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

...

}

AnimalCard

.

propTypes

=

{

additional

:

PropTypes

.

shape

(

{

link

:

PropTypes

.

string

,

notes

:

PropTypes

.

string

}

)

,

diet

:

PropTypes

.

arrayOf

(

PropTypes

.

string

)

.

isRequired

,

name

:

PropTypes

.

string

.

isRequired

,

scientificName

:

PropTypes

.

string

.

isRequired

,

showAdditional

:

PropTypes

.

func

.

isRequired

,

size

:

PropTypes

.

number

.

isRequired

,

}

Lưu lại file.

Như bạn có thể thấy trong đoạn code trên, có nhiều PropTypes khác nhau. Đây chỉ là một mẫu nhỏ; chi tiết bạn có thể xem tại tài liệu chính thức về React.

Hãy bắt đầu với phần prop name. Ở đây, bạn đang chỉ định rằng name phải là a string. Thuộc tính scientificName cũng vậy. size là a number, có thể bao gồm cả float và integer. showAdditional là một hàm (func).

Ở đây ta thấy diet có một chút khác biệt. Trong trường hợp này, bạn đang chỉ định diet sẽ là một array, nhưng bạn cũng cần chỉ định mảng này sẽ chứa những gì. Trong trường hợp này, mảng sẽ chỉ chứa các chuỗi.

Nếu bạn muốn kết hợp nhiều kiểu, bạn có thể sử dụng một prop khác được gọi là oneOfType, nó mang đối số là một mảng PropTypes hợp lệ. Bạn có thể sử dụng ở oneOfType bất kỳ đâu, ví dụ nếu bạn muốn thuộc tính size là một số hoặc một chuỗi, bạn có thể thay đổi nó thành như sau:

size

:

PropTypes

.

oneOfType

(

[

PropTypes

.

number

,

PropTypes

.

string

]

)

Prop additional cũng phức tạp hơn một chút. Trong trường hợp này, bạn đang chỉ định một đối tượng, ở đây để nói rõ bạn muốn đối tượng chứa những gì thì bạn sử dụng PropTypes.shape, lấy một đối tượng với các trường bổ sung sẽ cần đến trường riêng PropTypes của chúng. Trong trường hợp này, cả link và notes đều là PropTypes.string.

Hiện tại, tất cả dữ liệu đều khớp với các prop. Để xem điều gì sẽ xảy ra nếu PropTypes không khớp, hãy mở file data.js ra và sửa số 140 thành chuỗi ‘140’ như sau:

export

default

[

{

name

:

'Lion'

,

scientificName

:

'Panthero leo'

,

size

:

'140'

,

diet

:

[

'meat'

]

,

}

,

...

]

Bạn lưu lại và quay lại trang web bạn sẽ thấy có lỗi hiển thị ở phần console:

Không giống như các hệ thống kiểu khác như TypeScript, PropTypes sẽ không đưa ra cảnh báo cho bạn tại thời điểm xây dựng, và miễn là không có lỗi mã, nó sẽ vẫn biên dịch. Điều này có nghĩa là bạn có thể vô tình xuất bản mã có lỗi prop.

Bạn hãy đưa dữ liệu trở về đúng giá trị và kiểu cũ rồi lưu lại.

Bây giờ bạn hãy quay lại file AnimalCard.js. Ở đây bạn thấy rằng các prop ngoại trừ additional đều có thuộc tính isRequired. Điều đó có nghĩa là chúng được yêu cầu. Nếu bạn không đưa các yêu cầu vào thì mã sẽ vẫn được biên dịch, nhưng bạn sẽ thấy lỗi thời gian chạy trong bảng điều khiển.

Nếu không bắt buộc phải có prop, bạn có thể thêm giá trị mặc định. Một phương pháp hay là luôn thêm giá trị mặc định để tránh lỗi thời gian chạy nếu không yêu cầu một giá trị hỗ trợ. Ví dụ, trong component AnimalCard bạn đang gọi một hàm với dữ liệu additional. Nếu nó không có thì hàm sẽ thử và sửa đổi một đối tượng không tồn tại và ứng dụng sẽ gặp sự cố.

Để ngăn chặn sự cố này, hãy thêm defaultProp cho additional như sau:

import

PropTypes

from

'prop-types'

;

import

'./AnimalCard.css'

export

default

function

AnimalCard

(

{

...

}

AnimalCard

.

propTypes

=

{

additional

:

PropTypes

.

shape

(

{

link

:

PropTypes

.

string

,

notes

:

PropTypes

.

string

}

)

,

...

}

AnimalCard

.

defaultProps

=

{

additional

:

{

notes

:

'No Additional Information'

}

}

Lưu lại và quay lại refresh trang web, sau đó bạn nhấn vào nút More info của Lion bạn sẽ không thấy lỗi nữa, ngược lại bạn sẽ nhận được thông báo như sau:

Như vậy đến đây prop của bạn đã đạt ở mức độ hoàn chỉnh và được yêu cầu hoặc có mặc định để đảm bảo mã có thể dự đoán được. Điều này sẽ giúp các nhà phát triển tương lai (bao gồm cả chính bạn) hiểu một component cần những prop gì. Nó sẽ giúp bạn dễ dàng trao đổi và sử dụng lại các component của mình hơn bằng cách cung cấp cho bạn thông tin đầy đủ về cách component sẽ sử dụng dữ liệu mà nó đang nhận.

Phần kết luận

Trong hướng dẫn này, bạn đã tạo một số component sử dụng prop để hiển thị thông tin từ cha của nó. Prop cung cấp cho bạn sự linh hoạt để bắt đầu chia nhỏ các component lớn hơn thành các mảnh nhỏ hơn, tập trung hơn. Giờ đây, bạn không còn dữ liệu được kết hợp chặt chẽ với thông tin hiển thị nữa, bạn có thể đưa ra lựa chọn về cách phân đoạn ứng dụng của mình.

Prop là một công cụ quan trọng trong việc xây dựng các ứng dụng phức tạp, tạo cơ hội để tạo ra các component có thể thích ứng với dữ liệu mà chúng nhận được. Với PropTypes, bạn đã tạo ra các component có thể dự đoán và đọc được sẽ cung cấp cho một nhóm khả năng sử dụng lại công việc của nhau để tạo ra một cơ sở mã linh hoạt và ổn định.