内容简介:继续前面的文章下面继续分享创建状态组件我们之前提到我们的组件不需要状态。 如果我们希望能够根据用户的交互时间更新我们的组件会怎样? 那时,状态变得更加重要。
继续前面的文章 使用TypeScript开发React应用(二) 介绍了React+TypeScript应用的搭建中如何创建组件
下面继续分享创建状态组件
状态组件
我们之前提到我们的组件不需要状态。 如果我们希望能够根据用户的交互时间更新我们的组件会怎样? 那时,状态变得更加重要。
深入了解React中有关组件状态的最佳实践超出了本次分享的范围,但让我们快速查看Hello组件的有状态版本,看看添加状态是什么样的。我们将渲染两个 <button>
来更新Hello组件显示的感叹号的数量。
要做到这一点,我们需要做到下面几个步骤
- 为我们的状态定义一种类型(即this.state)
- 根据我们在构造函数中给出的props来初始化this.state。
- 为我们的按钮创建两个事件处理程序(onIncrement和onDecrement)。
实现代码如下
// src/components/StatefulHello.tsx
import * as React from 'react'; export interface Props { name: string; enthusiasmlevel?: number; } interface State { currentEnthusiasmLevel: number; } class Hello extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { currentEnthusiasmLevel: props.enthusiasmlevel || 1, }; } onIncrement = () => this.updateEnthusiasmLevel(this.state.currentEnthusiasmLevel + 1); onDecrement = () => this.updateEnthusiasmLevel(this.state.currentEnthusiasmLevel - 1); render() { const { name, } = this.props; if (this.state.currentEnthusiasmLevel <= 0) { throw new Error('You could be a little more enthusiastic.'); } return ( <div className="hello"> <div className="greeting"> Hello {name + getExclamationMarks(this.state.currentEnthusiasmLevel)} </div> <button onClick={this.onDecrement}>-</button> <button onClick={this.onIncrement}>+</button> </div> ); } updateEnthusiasmLevel(currentEnthusiasmLevel: number) { this.setState({ currentEnthusiasmLevel, }); } } export default Hello; function getExclamationMarks(numberMarks: number) { return Array(numberMarks + 1).join('!'); }
小提示
State onIncrement = () => ... this
我们不会在此分享中进一步使用此有状态组件。 有状态组件非常适合创建仅专注于呈现内容的组件(而不是处理核心应用程序状态)。 在某些情况下,它可以用于处理整个应用程序的状态,一个中心组件传递可以适当调用setState的函数; 但是,对于更大的应用程序,可能更喜欢专用的状态管理器(我们将在下面讨论)。
添加样式
给一个组件设置样式是很简单的。 要设置Hello组件的样式,我们可以在src/components/Hello.css中创建一个CSS文件。 src/components/Hello.css 内容如下
.hello { text-align: center; margin: 20px; font-size: 48px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .hello button { margin-left: 25px; margin-right: 25px; font-size: 40px; min-width: 50px; }
create-react-app使用的工具(即Webpack和各种加载器)允许我们只导入我们感兴趣的样式表。当我们的构建运行时,任何导入的.css文件将被连接成一个输出文件。 所以在src/components/Hello.tsx中,我们将添加以下导入。
import './Hello.css';
运行 npm run start
看下页面吧,是不是样式也已经加载进去了。
未完待续...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 创建 React 组件三种“姿势”
- 一键式创建React,Vue组件
- 使用TypeScript开发React应用(二) - 创建组件
- 使用 React Hooks 创建可复用的动画组件
- Angular7创建项目、组件、服务以及服务的使用
- React Hook 日常使用,一步步创建一个可排序表格组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。