使用TypeScript開發React應用(三) - 建立狀態元件
摘要：
繼續前面的文章使用TypeScript開發React應用(二)
介紹了React+TypeScript應用的搭建中如何建立元件
下面繼續分享建立狀態元件
狀態元件
我們之前提到我們的元件不需要狀態。 如果我們希望能夠根據使用者的互動時間更新我們的元件會怎樣？ 那時，狀...
繼續前面的文章ofollow,noindex">使用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
看下頁面吧，是不是樣式也已經載入進去了。
未完待續...