介绍
如果你曾经建立了一个Web应用程序,那么你有很好的机会在某个时候建立了一个标签文档界面。Tabs允许你将复杂的界面分解成可管理的子部分,用户可以快速切换。
在本文中,您将学习如何创建可重复使用的标签容器组件,您可以单独或与现有组件一起使用。
前提条件
在您开始本指南之前,您将需要以下内容:
要在 macOS 或 Ubuntu 18.04 上安装此功能,请遵循 如何在 macOS 上安装 Node.js 并创建本地开发环境 的步骤或 如何在 Ubuntu 18.04 上安装 Node.js 使用 PPA 设置项目的 [如何在 Ubuntu 18.04 上安装 Node.js 使用 PPA 安装]部分(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04)的步骤。
- 在本教程中,您将使用 Create React App创建应用程序。
本教程已在 Node.js 版本 10.20.1 和 npm 版本 6.14.4 上测试。
步骤 1 – 创建一个空的项目
在此步骤中,您将使用 Create React App创建一个新项目,然后将删除在启动项目时安装的样本项目和相关文件。
要开始,创建一个新项目. 在终端中,运行以下脚本以使用create-react-app安装新项目:
1npx create-react-app react-tabs-component
项目完成后,更改到目录:
1cd react-tabs-component
在新的终端卡或窗口中,使用 Create React App start script启动项目。
1npm start
如果项目未在浏览器窗口中打开,您可以通过访问 http://localhost:3000/ 打开它. 如果您正在从远程服务器运行,则地址将是 http://your_domain:3000。
您的浏览器将加载 React 模板应用程序,作为 Create React App 的一部分:
您将构建一组全新的自定义组件,因此您需要从清除一些锅炉板代码开始,以便您可以有一个空的项目。
要开始,请在文本编辑器中打开src/App.js。 这是注入到页面的根组件。 所有组件将从这里开始。 您可以找到有关App.js的更多信息,请参阅How To Set Up a React Project with Create React App(如何使用Create React App设置反应项目(LINK0))。
你會看到這樣的檔案:
1[label react-tabs-component/src/App.js]
2import React from 'react';
3import logo from './logo.svg';
4import './App.css';
5
6function App() {
7 return (
8 <div className="App">
9 <header className="App-header">
10 <img src={logo} className="App-logo" alt="logo" />
11 <p>
12 Edit <code>src/App.js</code> and save to reload.
13 </p>
14 <a
15 className="App-link"
16 href="https://reactjs.org"
17 target="_blank"
18 rel="noopener noreferrer"
19 >
20 Learn React
21 </a>
22 </header>
23 </div>
24 );
25}
26
27export default App;
删除从./logo.svg导入标识行,然后更换返回声明中的所有内容,以返回一组div标签和一个h1。
1[label react-tabs-component/src/App.js]
2
3import React from 'react';
4import './App.css';
5
6function App() {
7 return (
8 <div>
9 <h1>Tabs Demo</h1>
10 </div>
11 );
12}
13
14export default App;
保存和退出文本编辑器。
最后,删除标志. 你不会在你的应用程序中使用它,你应该在工作时删除未使用的文件。
在终端窗口中,键入以下命令来删除标志:
1rm src/logo.svg
现在项目已经设置,您可以创建您的第一个组件。
步骤 2 — 创建Tabs组件
在此步骤中,您将创建一个新的文件夹和Tabs组件,该组件将显示每个Tab。
首先,在src目录中创建一个名为components的文件夹:
1mkdir src/components
在组件文件夹中,创建一个名为Tabs.js的新文件:
1nano src/components/Tabs.js
将以下代码添加到新的 Tabs.js 文件中:
1[label react-tabs-component/src/components/Tabs.js]
2import React, { Component } from 'react';
3import PropTypes from 'prop-types';
4import Tab from './Tab';
这些是创建此组件所需的导入,该组件将跟踪哪个卡是活跃的,显示卡列表和活跃卡的内容。
接下来,添加以下代码,用于跟踪状态,并在Tabs.js中的导入下方显示活跃的卡片:
1[label react-tabs-component/src/components/Tabs.js]
2...
3
4class Tabs extends Component {
5 static propTypes = {
6 children: PropTypes.instanceOf(Array).isRequired,
7 }
8
9 constructor(props) {
10 super(props);
11
12 this.state = {
13 activeTab: this.props.children[0].props.label,
14 };
15 }
16
17 onClickTabItem = (tab) => {
18 this.setState({ activeTab: tab });
19 }
20
21...
将添加到活动卡的初始状态,并在您正在创建的 tabs 系列中从0开始。
onClickTabItem会将应用程序状态更新到用户点击的当前卡。
现在您可以将您的渲染函数添加到相同的文件中:
1[label react-tabs-component/src/components/Tabs.js]
2...
3
4 render() {
5 const {
6 onClickTabItem,
7 props: {
8 children,
9 },
10 state: {
11 activeTab,
12 }
13 } = this;
14
15 return (
16 <div className="tabs">
17 <ol className="tab-list">
18 {children.map((child) => {
19 const { label } = child.props;
20
21 return (
22 <Tab
23 activeTab={activeTab}
24 key={label}
25 label={label}
26 onClick={onClickTabItem}
27 />
28 );
29 })}
30 </ol>
31 <div className="tab-content">
32 {children.map((child) => {
33 if (child.props.label !== activeTab) return undefined;
34 return child.props.children;
35 })}
36 </div>
37 </div>
38 );
39 }
40}
41
42export default Tabs;
此组件会跟踪哪个标签是活跃的,显示标签列表和活跃标签的内容。
Tab组件使用您将创建的下一个组件,名为Tab。
步骤 3 – 创建Tab组件
在此步骤中,您将创建Tab组件,您将使用它来创建单个卡。
在组件文件夹中创建一个名为Tab.js的新文件:
1nano src/components/Tab.js
将以下代码添加到Tab.js文件中:
1[label react-tabs-component/src/components/Tab.js]
2
3import React, { Component } from 'react';
4import PropTypes from 'prop-types';
再次,您从反应导入 React,然后导入PropTypes。PropTypes是一个特殊的propTypes属性,用于在组件中运行类型检查。
接下来,在进口语句下方添加以下代码:
1[label react-tabs-component/src/components/Tab.js]
2...
3class Tab extends Component {
4 static propTypes = {
5 activeTab: PropTypes.string.isRequired,
6 label: PropTypes.string.isRequired,
7 onClick: PropTypes.func.isRequired,
8 };
9
10 onClick = () => {
11 const { label, onClick } = this.props;
12 onClick(label);
13 }
14
15 render() {
16 const {
17 onClick,
18 props: {
19 activeTab,
20 label,
21 },
22 } = this;
23
24 let className = 'tab-list-item';
25
26 if (activeTab === label) {
27 className += ' tab-list-active';
28 }
29
30 return (
31 <li
32 className={className}
33 onClick={onClick}
34 >
35 {label}
36 </li>
37 );
38 }
39}
40
41export default Tab;
此组件中的PropTypes用于确保activeTab和label是字符串和需要。
Tab组件显示了卡的名称,如果卡是活跃的,则会添加一个额外的类别。 点击时,该组件会发射一个处理器,即onClick,这会让Tabs组件知道哪个卡应该活跃。
步骤 4 – 添加 CSS 来设计应用程序
除了创建组件外,您还会添加CSS,以使组件看起来像 tabs。
在App.css文件中,删除所有默认 CSS,并添加以下代码:
1[label react-tabs-component/src/App.css] .tab-list {
2 border-bottom: 1px solid #ccc;
3 padding-left: 0;
4}
5
6.tab-list-item {
7 display: inline-block;
8 list-style: none;
9 margin-bottom: -1px;
10 padding: 0.5rem 0.75rem;
11}
12
13.tab-list-active {
14 background-color: white;
15 border: solid #ccc;
16 border-width: 1px 1px 0 1px;
17}
这将使标签在线,并给活跃标签一个边界,使它在点击时脱颖而出。
步骤 5 – 更新App.js
现在组件和相关风格已经安装,请更新应用组件以使用它们。
首先,更新导入以包括Tabs组件:
1[label react-tabs-component/src/App.js]
2import React from 'react';
3import Tabs from "./components/Tabs";
4import "./App.css";
接下来,更新返回声明中的代码以包含已导入的Tabs组件:
1...
2
3function App() {
4 return (
5 <div>
6 <h1>Tabs Demo</h1>
7 <Tabs>
8 <div label="Gator">
9 See ya later, <em>Alligator</em>!
10 </div>
11 <div label="Croc">
12 After 'while, <em>Crocodile</em>!
13 </div>
14 <div label="Sarcosuchus">
15 Nothing to see here, this tab is <em>extinct</em>!
16 </div>
17 </Tabs>
18 </div>
19 );
20}
21
22export default App;
附带标签的div给了标签的内容。
随着Tabs被添加到App组件中,您现在将有一个工作卡界面,允许您在部分之间切换:
您可以查看此 Github 存储以查看完成的代码。
结论
在本教程中,您使用 React 构建了一个标签组件,以管理和更新您的应用程序的状态。
从这里,您可以学习其他方法来 style React components创建更具吸引力的用户界面。
您还可以在 DigitalOcean 上观看完整的 如何在 React.js 中编码系列,了解更多关于使用 React 开发的信息。