Cách tùy chỉnh các thành phần React với Props
Trong hướng dẫn này, bạn sẽ tạo các thành phần tùy chỉnh bằng cách chuyển các đạo cụ cho thành phần của bạn. Đạo cụ 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 đạo cụ HTML tiêu chuẩn, nhưng chúng không được định nghĩa 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ácthành phần React khác. Các thành phần tùy chỉnh của bạn có thể sử dụng đạo cụ để hiển thị dữ liệu hoặc sử dụng dữ liệu để làm cho các thành phần tương tác. Đạo cụ là một phần quan trọng trong việc tạo ra các thành phần 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ác công cụ để phát triển các thành phần tùy chỉnh có thể xử lý các tình huống độc đáo. Sau khi thêm đạo cụ vào thành phần của bạn , bạn sẽ sử dụng PropTypes để xác định loại dữ liệu mà bạn mong đợi một thành phần nhận được. PropTypes là một hệ thống kiểu đơn giản để kiểm tra xem dữ liệu có trùng với kiểu mong đợi trong thời gian chạy hay không. Chúng đóng role như cả tài liệu hướng dẫn và 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.
Đến cuối hướng dẫn, bạn sẽ sử dụng nhiều 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 cài đặt 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 các đạo cụ, hãy bắt đầu với Bước 2 .
Yêu cầu
Bạn cần một môi trường phát triển chạy Node.js ; hướng dẫn này đã được thử nghiệm trên Node.js version 10.20.1 và npm version 6.14.4. Để cài đặt phần mềm này trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04 .
Trong hướng dẫn này, bạn sẽ sử dụng Create React App . Bạn có thể tìm thấy hướng dẫn cài đặt ứng dụng với Tạo ứng dụng React tại Cách cài đặt dự án phản ứng với Tạo ứng dụng phản ứng . Hướng dẫn này cũng giả định kiến thức về các thành phần React mà bạn có thể tìm hiểu trong hướng dẫn Cách tạo các thành phần tùy chỉnh trong React của ta .
Bạn cũng cần biết những kiến thức cơ bản về JavaScript, bạn có thể tìm thấy điều này trong Cách viết mã trong JavaScript , cùng với kiến thức cơ bản về HTML và CSS. Một nguồn tốt cho HTML và CSS là Mạng nhà phát triển Mozilla .
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 Tạo ứng dụng React . Sau đó, bạn sẽ xóa dự án mẫu và các file 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 file đơn giản để tổ chức các thành phần của bạn .
Để bắt đầu, hãy tạo 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 khi dự án kết thúc, hãy thay đổi vào folder :
- cd prop-tutorial
Trong cửa sổ hoặc tab terminal mới, hãy bắt đầu dự án bằng cách sử dụng tập lệnh bắt đầu Tạo ứng dụng React . Trình duyệt sẽ tự động làm mới các thay đổi, vì vậy hãy để tập lệnh này chạy trong suốt thời gian bạn làm việc:
- npm start
Bạn sẽ nhận được một server local đang chạy. Nếu dự án không mở trong cửa sổ trình duyệt, bạn có thể mở dự án bằng cách chuyển đến http://localhost:3000/ . Nếu bạn đang chạy điều này từ một server từ xa, địa chỉ sẽ là http:// your_domain :3000 .
Trình duyệt của bạn sẽ tải với một ứng dụng React đơn giản được bao gồm như một phần của Create React App:
Bạn sẽ xây dựng một tập hợp các thành phần 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 trong editor . Đây là thành phần root được đưa vào trang. Tất cả các thành phần sẽ bắt đầu từ đây. Bạn có thể tìm thêm thông tin về App.js tại Cách cài đặt một dự án React với Tạo ứng dụng React .
Mở src/App.js bằng lệnh sau:
- nano src/App.js
Bạn sẽ thấy một file như thế này:
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; Xóa import logo from './logo.svg'; dòng import logo from './logo.svg'; . Sau đó, thay thế mọi thứ trong câu lệnh return để trả về một tập hợp các thẻ trống: <></> . Điều này sẽ cung cấp cho bạn một trang xác thực mà không trả lại gì. Mã cuối cùng sẽ giống như sau:
import React from 'react'; import './App.css'; function App() { return <></>; } export default App; Lưu và thoát khỏi editor .
Cuối cùng, xóa logo. Bạn sẽ không sử dụng nó trong ứng dụng của bạn và bạn nên xóa các file không sử dụng khi làm việc. Nó sẽ giúp bạn khỏi nhầm lẫn trong tương lai.
Trong cửa sổ terminal , nhập lệnh sau:
- rm src/logo.svg
Nếu bạn nhìn vào trình duyệt của bạn , bạn sẽ thấy một màn hình trống.
Đến đây bạn đã hoàn thành dự án Tạo ứng dụng React mẫu, hãy tạo một cấu trúc file đơn giản. Điều này sẽ giúp bạn giữ cho các thành phần của bạn bị cô lập và độc lập.
Tạo một folder được gọi là components trong folder src . Điều này sẽ chứa tất cả các thành phần tùy chỉnh của bạn.
- mkdir src/components
Mỗi thành phần sẽ có folder riêng để lưu trữ file thành phần cùng với các kiểu, hình ảnh nếu có và các bài kiểm tra.
Tạo folder cho App :
- mkdir src/components/App
Di chuyển tất cả các file App vào folder đó. Sử dụng ký tự đại diện, * , để chọn các file nào bắt đầu bằng App. dù phần mở rộng file . Sau đó sử dụng lệnh mv để đưa chúng vào folder mới.
- mv src/App.* src/components/App
Cuối cùng, cập nhật đường dẫn nhập tương đối trong index.js , là thành phần root khởi động toàn bộ quá trình.
- nano src/index.js
Câu lệnh nhập cần trỏ đến file App.js trong folder App , vì vậy hãy thực hiện thay đổi được đánh dấu sau:
import React from 'react'; 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 và thoát khỏi file .
Bây giờ dự án đã được cài đặt , bạn có thể tạo thành phần đầu tiên của bạn .
Bước 2 - Xây dựng các thành phần động với Đạo cụ
Trong bước này, bạn sẽ tạo một thành phần sẽ thay đổi dựa trên thông tin đầu vào được gọi là đạo cụ . Đạ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ả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 bạn .
Đế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 sử dụ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 trong folder src/App được gọi là dữ liệu.
- touch src/components/App/data.js
Mở file mới trong editor của bạn:
- nano src/components/App/data.js
Tiếp theo, thêm một mảng các đối tượng mà bạn sẽ sử dụng làm dữ liệu mẫu:
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 các đối tượng chứa nhiều loại dữ liệu và sẽ cho bạn cơ hội thử nhiều loại đạo cụ. 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à additional , sẽ chứa các liên kết hoặc ghi chú. Trong mã này, bạn cũng xuất mảng làm default .
Lưu và thoát khỏi file .
Tạo thành phần
Tiếp theo, tạo một thành phần giữ chỗ có tên là AnimalCard . Thành phần này cuối cùng sẽ lấy đạo cụ và hiển thị dữ liệu.
Đầu tiên, tạo một folder trong src/components gọi là AnimalCard sau đó touch một file có tên là src/components/AnimalCard/AnimalCard.js và một file CSS có tên là src/components/AnimalCard/AnimalCard.css .
- mkdir src/components/AnimalCard
- touch src/components/AnimalCard/AnimalCard.js
- touch src/components/AnimalCard/AnimalCard.css
Mở AnimalCard.js trong editor của bạn:
- nano src/components/AnimalCard/AnimalCard.js
Thêm thành phần cơ bản nhập CSS và trả về <h2> .
import React from 'react'; import './AnimalCard.css' export default function AnimalCard() { return <h2>Animal</h2> } Lưu và thoát khỏi file . Đến đây bạn cần nhập dữ liệu và thành phần vào thành phần App cơ sở của bạn .
Mở src/components/App/App.js :
- nano src/components/App/App.js
Nhập dữ liệu và thành phần, sau đó lặp lại dữ liệu trả về thành phần cho từng mục trong mảng:
import React from 'react'; 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 và thoát khỏi file . Ở đâ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 div bao bọc với một lớp mà bạn sẽ sử dụng để tạo kiểu và <h1> để gắn nhãn cho dự án của bạn.
Khi bạn lưu, trình duyệt sẽ reload và bạn sẽ thấy nhãn cho mỗi thẻ.
Tiếp theo, thêm một số kiểu dáng để sắp xếp các mục. Mở App.css :
- nano src/components/App/App.css
Thay thế nội dung bằng phần sau để sắp xếp các phần tử:
.wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .wrapper h1 { text-align: center; width: 100%; } Thao tác này sẽ sử dụng flexbox để sắp xếp lại dữ liệu để nó sẽ thành dòng. Phần padding cung cấp một số không gian trong cửa sổ trình duyệt. justify-content sẽ tạo ra khoảng trống thừa giữa các phần tử và .wrapper h1 sẽ cung cấp cho nhãn Animal có chiều rộng đầy đủ.
Lưu và thoát khỏi file . Khi bạn làm như vậy, trình duyệt sẽ làm mới và bạn sẽ thấy một số dữ liệu được tách ra.
Thêm đạo cụ
Đến đây bạn đã cài đặt các thành phần của bạn , bạn có thể thêm chỗ dựa đầu tiên của bạn . Khi bạn lặp lại dữ liệu của bạn , bạn có quyền truy cập vào từng đối tượng trong mảng data và các mục trong đó. Bạn sẽ thêm từng phần dữ liệu vào một giá đỡ riêng biệt mà sau đó bạn sẽ sử dụng trong thành phần AnimalCard của bạn .
Mở App.js :
- nano src/components/App/App.js
Thêm một name hỗ trợ vào AnimalCard .
import React from 'react'; ... 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 và thoát khỏi file . name prop 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ẽ chuyển thuộc tính name từ đối tượng animal trong dấu ngoặc nhọn.
Đến đây bạn đã chuyển một chỗ dựa cho thành phần mới, bạn cần sử dụng nó. Mở AnimalCard.js :
- nano src/components/AnimalCard/AnimalCard.js
Tất cả các đạo cụ mà bạn chuyển vào thành phần được thu thập vào một đối tượng sẽ là đối số đầu tiên của hàm của bạn. Phá hủy đối tượng để lấy ra các đạo cụ riêng lẻ:
import React from 'react'; import './AnimalCard.css' export default function AnimalCard(props) { const { name } = props; return ( <h2>{name}</h2> ); } Lưu ý 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 phá hủy đố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 tiêu đề trong <h2> , bao quanh giá trị bằng dấu ngoặc nhọn để React biết để đánh giá 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ụ: bạn có thể tạo phần tử <h2> như sau: <h2>{props.title}</h2> . Ưu điểm của hủy là bạn có thể thu thập các đạo cụ không sử dụng và sử dụng toán tử nghỉ đối tượng .
Lưu và thoát khỏi file . Khi bạn làm như vậy, trình duyệt sẽ reload và 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 props có thể là bất kỳ kiểu dữ liệu nào mà bạn có thể chuyển cho một hàm JavaScript. Để xem điều này tại nơi làm việc, hãy thêm phần còn lại của dữ liệu.
Mở file App.js :
- nano src/components/App/App.js
Thêm một chỗ dựa cho mỗi điều sau: tên scientificName , size , diet và additional . Chúng bao gồm chuỗi, số nguyên, mảng và đối tượng.
import React from 'react'; ... function App() { return ( <div className="wrapper"> <h1>Animals</h1> {albums.map(album => ( <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ự bảng chữ cái giúp bạn dễ dàng đọc lướt danh sách các đạo cụ, đặc biệt là trong một danh sách lớn hơn. Bạn cũng có thể thêm chúng trên cùng một dòng, nhưng tách thành một trên mỗi dòng giúp mọi thứ có thể đọc được.
Lưu và đóng file . Mở AnimalCard.js .
- nano src/components/AnimalCard/AnimalCard.js
Lần này, hãy hủy cấu trúc các đạo cụ trong danh sách tham số hàm và sử dụng dữ liệu trong thành phần:
import React from 'react'; 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> ); } Sau khi lấy dữ liệu ra, bạn có thể thêm tên scientificName và size vào các thẻ tiêu đề, nhưng bạn cần chuyển mảng thành một chuỗi để React có thể hiển thị nó trên trang. Bạn có thể làm điều đó với join(', ') , sẽ tạo một danh sách được phân tách bằng dấu phẩy.
Lưu và đóng file . Khi bạn làm như vậy, trình duyệt sẽ làm mới và bạn sẽ thấy dữ liệu 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 chức năng để cảnh báo user với dữ liệu. Điều này sẽ cho bạn cơ hội chuyển các hàm làm đạo cụ và sau đó sử dụng dữ liệu bên trong một thành phần khi bạn gọi một hàm.
Mở App.js :
- nano src/components/App/App.js
Tạo một hàm có tên showAdditionalData sẽ chuyển đổi đối tượng thành chuỗi và hiển thị nó dưới dạng cảnh báo.
import React from 'react'; ... 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 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 cảnh báo.
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 đạo cụ. Do đó, bạn có thể chuyển showAdditional vào AnimalCard như một phần mềm hỗ trợ được gọi là showAdditional .
Lưu và đóng file . Mở AnimalCard :
- nano src/components/AnimalCard/AnimalCard.js
Kéo hàm showAdditional từ đối tượng props, sau đó tạo một <button> với sự kiện onClick gọi hàm với đối tượng additional :
import React from 'react'; 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 các file . Khi bạn làm như vậy, trình duyệt sẽ làm mới và bạn sẽ thấy một nút sau mỗi thẻ. Khi bạn nhấp vào nút, bạn sẽ nhận được cảnh báo với dữ liệu bổ sung.
Nếu bạn thử nhấp vào Thông tin khác cho Lion , bạn sẽ gặp lỗi. Đó là bởi vì không có dữ liệu bổ sung cho sư tử. Bạn sẽ thấy cách khắc phục điều đó trong Bước 3.
Cuối cùng, thêm một số kiểu dáng cho thẻ nhạc. Thêm một className của animal-wrapper vào div trong AnimalCard :
import React from 'react'; import './AnimalCard.css' export default function AnimalCard({ ... return ( <div className="animal-wrapper"> ... </div> ) } Lưu và đóng file . Mở AnimalCard.css :
- nano src/components/AnimalCard/AnimalCard.css
Thêm CSS để cung cấp cho thẻ và nút một đường viền nhỏ và phần đệm:
.animal-wrapper { border: solid black 1px; margin: 10px; padding: 10px; width: 200px; } .animal-wrapper button { font-size: 1em; border: solid black 1px; padding: 10; background: none; cursor: pointer; margin: 10px 0; } CSS này sẽ thêm một đường viền nhỏ vào thẻ và thay thế kiểu nút mặc định bằng đường viền và phần đệm. cursor: pointer sẽ thay đổi con trỏ khi bạn di chuột qua nút.
Lưu và đóng file . Khi bạn thực hiện, trình duyệt sẽ làm mới và bạn sẽ thấy dữ liệu trong từng thẻ.
Đến đây, bạn đã tạo hai thành phần tùy chỉnh. Bạn đã chuyển dữ liệu cho thành phần thứ hai từ thành phần đầu tiên bằng cách sử dụng đạo cụ. Các đạo cụ 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 thành phần thứ hai, bạn đã sử dụng các đạo cụ để tạo một thành phần động bằng JSX.
Trong bước tiếp theo, bạn sẽ sử dụng hệ thống loại được gọi là prop-types để chỉ định cấu trúc mà thành phần 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 Đạo cụ có thể đoán trước với PropTypes và defaultProps
Trong bước này, bạn sẽ thêm hệ thống loại nhẹ vào các thành phần của bạn với PropTypes . PropTypes hoạt động giống như các hệ thống loại khác bằng cách xác định rõ ràng loại dữ liệu bạn mong đợi nhận được cho một chỗ dựa nhất định. Chúng cũng cung cấp cho bạn cơ hội xác định dữ liệu mặc định trong trường hợp không phải lúc nào cũng cần đến phần hỗ trợ. Không giống như hầu hết các hệ thống loại, PropTypes là một kiểm tra thời gian chạy, vì vậy nếu đạo cụ không trùng với loại, 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 cho thành phần tùy chỉnh của bạn bằng cách xác định loại cho từng chỗ dựa. Điều này sẽ đảm bảo người tiếp theo làm việc trên thành phần sẽ có ý tưởng rõ ràng về cấu trúc của dữ liệu mà thành phần cần .
Gói prop-types được bao gồm như một phần của cài đặt Create React App, vì vậy để sử dụng nó, tất cả những gì bạn phải làm là nhập nó vào thành phần của bạn .
Mở AnimalCard.js :
- nano src/components/AnimalCard/AnimalCard.js
Sau đó, nhập PropTypes từ prop-types :
import React from 'react'; import PropTypes from 'prop-types'; import './AnimalCard.css' export default function AnimalCard({ ... } Thêm PropTypes trực tiếp vào hàm thành phần. Trong JavaScript, các hàm là các đối tượng , nghĩa là bạn có thể thêm các thuộc tính bằng cú pháp dấu chấm. Thêm PropTypes sau vào AnimalCard.js :
import React from 'react'; 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 và đóng file .
Như bạn thấy, có rất nhiều PropTypes khác nhau. Đây chỉ là một mẫu nhỏ; xem tài liệu chính thức về React để xem những tài liệu khác mà bạn có thể sử dụng.
Hãy bắt đầu với name prop. Ở đây, bạn đang chỉ định rằng name phải là một string . Thuộc tính scientificName cũng vậy. size là một number , có thể bao gồm cả number , chẳng hạn như 1.5 và số nguyên chẳng hạn như 6 . showAdditional là một hàm ( func ).
diet , 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 các loại, bạn có thể sử dụng một hỗ trợ khác gọi là oneOfType , lấy một mảng các PropTypes hợp lệ. Bạn có thể sử dụng oneOfType bất cứ đâu, vì vậy nếu bạn muốn size là một số hoặc một chuỗi, bạn có thể thay đổi nó thành sau:
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) Việc additional chống đỡ 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, nhưng nói rõ hơn một chút, bạn đang nói rõ những gì bạn muốn đối tượng chứa. Để làm điều đó, bạn sử dụng PropTypes.shape , lấy một đối tượng có các trường bổ sung cần PropTypes của riêng PropTypes . Trong trường hợp này, link và notes đều là PropTypes.string .
Hiện tại, tất cả dữ liệu đều được tạo hình tốt và trùng với các đạo cụ. Để xem điều gì xảy ra nếu PropTypes không khớp, hãy mở dữ liệu :
- nano src/components/App/data.js
Thay đổi kích thước thành một chuỗi trên mục đầu tiên:
export default [ { name: 'Lion', scientificName: 'Panthero leo', size: '140', diet: ['meat'], }, ... ] Lưu các file . Khi bạn thực hiện, trình duyệt sẽ làm mới và bạn sẽ thấy lỗi trong console .
Errorindex.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8) 
Không giống như các hệ thống loại khác như nguyên cảo , PropTypes sẽ không cung cấp cho bạn một cảnh báo tại thời gian xây dựng, và chừng nào không có lỗi mã, nó vẫn sẽ biên dịch. Điều này nghĩa là bạn có thể vô tình xuất bản mã có lỗi chống đỡ.
Thay đổi dữ liệu trở lại đúng loại:
export default [ { name: 'Lion', scientificName: 'Panthero leo', size: 140, diet: ['meat'], }, ... ] Lưu và đóng file .
Mở AnimalCard.js :
- nano src/components/AnimalCard/AnimalCard.js
Mọi chỗ dựa ngoại trừ additional đều có thuộc tính isRequired . Điều đó nghĩa là chúng được yêu cầu. Nếu bạn không bao gồm một phần mềm hỗ trợ bắt buộc, mã sẽ vẫn được biên dịch, nhưng bạn sẽ thấy lỗi thời gian chạy trong console .
Nếu không bắt buộc phải có chỗ dựa, 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 để ngăn lỗi thời gian chạy nếu không yêu cầu một giá trị hỗ trợ. Ví dụ: trong thành phần AnimalCard , bạn đang gọi một hàm với dữ liệu additional . Nếu nó không có ở đó, 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 một defaultProp để additional :
import React from 'react'; 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' } } Bạn thêm defaultProps vào hàm bằng cách sử dụng cú pháp dấu chấm giống như bạn đã làm với propTypes , sau đó bạn thêm giá trị mặc định mà thành phần sẽ sử dụng nếu prop undefined được undefined . Trong trường hợp này, bạn đang trùng với hình dạng additional , bao gồm một thông báo rằng không có thông tin bổ sung.
Lưu và đóng file . Khi bạn làm như vậy, trình duyệt sẽ làm mới. Sau khi nó được làm mới, hãy nhấp vào nút More Info cho Lion . Nó không có trường additional trong dữ liệu nên phần hỗ trợ là undefined . Nhưng AnimalCard sẽ thay thế trong chỗ dựa mặc định.
Như vậy, các đạo cụ của bạn đã được ghi chép đầy đủ 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 thành phần cần đạo cụ gì. Nó sẽ giúp bạn dễ dàng trao đổi và sử dụng lại các thành phần của bạn hơn bằng cách cung cấp cho bạn thông tin đầy đủ về cách thành phần sẽ sử dụng dữ liệu mà nó đang nhận.
Kết luận
Trong hướng dẫn này, bạn đã tạo một số thành phần sử dụng đạo cụ để hiển thị thông tin từ cha mẹ. Đạo cụ cho phép bạn linh hoạt để bắt đầu chia nhỏ các thành phần lớn hơn thành các mảnh nhỏ hơn, tập trung hơn. Như vậ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 bạn .
Đạo cụ 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 thành phần có thể thích ứng với dữ liệu mà chúng nhận được. Với PropTypes , bạn đang tạo ra các thành phần có thể dự đoán được và có thể đọc được sẽ cung cấp cho group 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. Nếu bạn muốn xem thêm các hướng dẫn về React, hãy xem trang Chủ đề React của ta hoặc quay lại trang Cách viết mã trong chuỗi React.js .
Các tin liên quan
