Cách tạo thành phần tab bằng React
Nếu bạn đã từng xây dựng một ứng dụng web, rất có thể bạn đã xây dựng giao diện tài liệu theo thẻ tại điểm này hay lúc khác. Các tab cho phép bạn chia các giao diện phức tạp thành các phần phụ có thể quản lý được mà user có thể nhanh chóng chuyển đổi giữa các giao diện. Tab là một thành phần giao diện user phổ biến và rất quan trọng để hiểu cách triển khai.Trong bài viết này, bạn sẽ học cách tạo thành phần chứa tab có thể tái sử dụng mà bạn có thể sử dụng bởi chính nó hoặc với các thành phần hiện có của bạn.
Yêu cầu
Trước khi bắt đầu hướng dẫn này, bạn cần các thành phần sau :
- Bạn cần một môi trường phát triển chạy Node.js. Để 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ẽ tạo ứng dụng bằng Create React App . Bạn có thể tìm 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 React với Tạo ứng dụng React
- Bạn cũng cần có kiến thức cơ bản về JavaScript, bạn có thể tìm thấy kiến thức 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 .
Hướng dẫn này đã được thử nghiệm trên Node.js version 10.20.1 và npm version 6.14.4.
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.
Để bắt đầu, hãy tạo một dự án mới. Trong terminal 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 react-tabs-component
Sau khi dự án kết thúc, hãy thay đổi vào folder :
- cd react-tabs-component
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 khi bạn làm việc:
- npm start
Thao tác này sẽ khởi động một server đang chạy local . Nếu dự án không mở trong cửa sổ trình duyệt, bạn có thể mở bằng cách truy cập 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 ứng dụng React mẫu được bao gồm như một phần của Tạo ứng dụng React:
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, vì vậy bạn cần 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 .
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ế tất cả mọi thứ trong return tuyên bố quay trở lại một tập hợp các div thẻ và một h1 . Điều này sẽ cung cấp cho bạn một trang hợp lệ trả về h1 hiển thị Tabs Demo . Mã cuối cùng sẽ giống như sau:
import React from 'react'; import './App.css'; function App() { return ( <div> <h1>Tabs Demo</h1> </div> ); } 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 về lâu dài.
Trong cửa sổ terminal , nhập lệnh sau để xóa logo:
- rm src/logo.svg
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 - Tạo thành phần Tabs
Trong bước này, bạn sẽ tạo một folder mới và thành phần Tabs sẽ hiển thị từng Tab .
Đầu tiên, tạo một folder trong folder src tên là components :
- mkdir src/components
Bên trong folder components , tạo một file mới có tên Tabs.js :
- nano src/components/Tabs.js
Thêm mã sau vào file Tabs.js mới:
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Tab from './Tab'; Đây là những nhập bạn cần để tạo thành phần này. Thành phần này sẽ theo dõi tab nào đang hoạt động, hiển thị danh sách các tab và nội dung b đang hoạt động.
Tiếp theo, thêm mã sau sẽ được sử dụng để theo dõi trạng thái và hiển thị tab đang hoạt động bên dưới các lần imports trong Tabs.js :
... class Tabs extends Component { static propTypes = { children: PropTypes.instanceOf(Array).isRequired, } constructor(props) { super(props); this.state = { activeTab: this.props.children[0].props.label, }; } onClickTabItem = (tab) => { this.setState({ activeTab: tab }); } ... Trạng thái ban đầu được thêm vào cho tab đang hoạt động và sẽ bắt đầu từ 0 trong mảng tab bạn sẽ tạo.
onClickTabItem sẽ cập nhật trạng thái ứng dụng cho tab hiện tại được user nhấp vào.
Đến đây bạn có thể thêm chức năng kết xuất của bạn vào cùng một file :
... render() { const { onClickTabItem, props: { children, }, state: { activeTab, } } = this; return ( <div className="tabs"> <ol className="tab-list"> {children.map((child) => { const { label } = child.props; return ( <Tab activeTab={activeTab} key={label} label={label} onClick={onClickTabItem} /> ); })} </ol> <div className="tab-content"> {children.map((child) => { if (child.props.label !== activeTab) return undefined; return child.props.children; })} </div> </div> ); } } export default Tabs; Thành phần này theo dõi tab nào đang hoạt động, hiển thị danh sách các tab và nội dung b đang hoạt động.
Thành phần Tabs sử dụng thành phần tiếp theo mà bạn sẽ tạo được gọi là Tab .
Bước 3 - Tạo thành phần Tab
Trong bước này, bạn sẽ tạo thành phần Tab mà bạn sẽ sử dụng để tạo các tab riêng lẻ.
Tạo một file mới có tên Tab.js bên trong folder components :
- nano src/components/Tab.js
Thêm mã sau vào file Tab.js :
import React, { Component } from 'react'; import PropTypes from 'prop-types'; , bạn nhập Phản ứng từ react và nhập khẩu PropTypes . PropTypes là một propTypes tính propTypes đặc biệt được sử dụng để chạy kiểm tra kiểu trên các đạo cụ trong một thành phần.
Tiếp theo, thêm mã sau vào bên dưới các câu lệnh import :
... class Tab extends Component { static propTypes = { activeTab: PropTypes.string.isRequired, label: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, }; onClick = () => { const { label, onClick } = this.props; onClick(label); } render() { const { onClick, props: { activeTab, label, }, } = this; let className = 'tab-list-item'; if (activeTab === label) { className += ' tab-list-active'; } return ( <li className={className} onClick={onClick} > {label} </li> ); } } export default Tab; PropTypes trong thành phần này được sử dụng đảm bảo rằng activeTab và label là một chuỗi và được yêu cầu. onClick được cài đặt là một chức năng cũng được yêu cầu.
Thành phần Tab hiển thị tên b và thêm một lớp bổ sung nếu tab đang hoạt động. Khi được nhấp, thành phần sẽ kích hoạt một trình xử lý, onClick , sẽ cho thành phần Tabs biết tab nào nên hoạt động.
Bước 4 - Thêm CSS để tạo kiểu cho ứng dụng
Ngoài việc tạo các thành phần, bạn sẽ thêm CSS để cung cấp cho các thành phần dạng tab.
Bên trong file App.css , hãy xóa tất cả CSS mặc định và thêm mã này:
.tab-list { border-bottom: 1px solid #ccc; padding-left: 0; } .tab-list-item { display: inline-block; list-style: none; margin-bottom: -1px; padding: 0.5rem 0.75rem; } .tab-list-active { background-color: white; border: solid #ccc; border-width: 1px 1px 0 1px; } Điều này sẽ làm cho các tab thẳng hàng và tạo đường viền cho tab active để làm cho nó nổi bật khi nhấp vào.
Bước 5 - Cập nhật App.js
Bây giờ các thành phần và kiểu liên kết đã có sẵn, hãy cập nhật Thành phần App để sử dụng chúng.
Trước tiên, hãy cập nhật các mục nhập để bao gồm thành phần Tabs :
import React from 'react'; import Tabs from "./components/Tabs"; import "./App.css"; Tiếp theo, cập nhật mã trong câu lệnh trả về để bao gồm thành phần Tabs nhập:
... function App() { return ( <div> <h1>Tabs Demo</h1> <Tabs> <div label="Gator"> See ya later, <em>Alligator</em>! </div> <div label="Croc"> After 'while, <em>Crocodile</em>! </div> <div label="Sarcosuchus"> Nothing to see here, this tab is <em>extinct</em>! </div> </Tabs> </div> ); } export default App; Các div có nhãn được liên kết cung cấp nội dung của các tab.
Với các Tabs được thêm vào thành phần App , giờ đây bạn sẽ có giao diện tab đang hoạt động cho phép bạn chuyển đổi giữa các phần:
Bạn có thể xem Kho lưu trữ Github này để xem mã đã hoàn thành.
Kết luận
Trong hướng dẫn này, bạn đã xây dựng một thành phần tab bằng React để quản lý và cập nhật trạng thái ứng dụng của bạn .
Từ đây, bạn có thể tìm hiểu các cách khác để tạo kiểu cho các thành phần React nhằm tạo ra một giao diện user hấp dẫn hơn nữa.
Bạn cũng có thể theo dõi toàn bộ loạt bài Cách viết mã trong React.js trên DigitalOcean để tìm hiểu thêm về cách phát triển với React.
Các tin liên quan
