React TypeScript 定义组件的各种方式

举例说明

比如我们要定义一个计数器 Counter，它包含一个 label 和一个 button，计数器的初始值由外部传入，点击 button 计数加 1:

这虽然是个简单组件，但却包含了 React 定义组件的两大核心点：

1. 属性由外部传入
2. 状态由内部控制

组件样式：

// counter样式
const counterStyle = {backgroundColor: "orange",width: "100px",height: "100px",borderRadius: "10px",display: "flex",flexDirection: "column",alignItems: "center",justifyContent: "center",
} as React.CSSProperties;

使用组件：

<Counter initialCount={6} />

1. 使用 class 定义

// 属性
type Props = {// 初始countinitialCount: number;
};// 状态
type State = {count: number;
};// 计数器
class Counter extends Component<Props, State> {constructor(props: Props) {super(props);this.state = {count: props.initialCount,};}render() {return (<div style={counterStyle}><p>count={this.state.count}</p><buttononClick={() => {this.setState({count: this.state.count + 1,});}}>加 1</button></div>);}
}

2. 使用函数定义

2.1 使用普通函数

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
function Counter(props: Props) {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>加 1</button></div>);
}

注：此函数返回的类型是 JSX.Element。

2.2 使用函数组件

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
const Counter = (props: Props) => {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>加 1</button></div>);
};

注：此函数返回的类型是 JSX.Element。
若需要，可以指定函数返回的具体类型：

// 属性
type Props = {// 初始countinitialCount: number;
};// 计数器
const Counter: React.FC<Props> = (props) => {const [count, setCount] = useState(props.initialCount);return (<div style={counterStyle}><p>count={count}</p><buttononClick={() => {setCount(count + 1);}}>加 1</button></div>);
};

此时函数的返回值类型是 React.FC<Props>。