一、React.FC<>
-
React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent:
const App: React.FunctionComponent<{message: string}> = ({message}) => (
<div>{message}</div>
);
React.FC包含了PropsWithChildren的泛型，不用显示的声明props.children的类型。React.FC<>对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。React.FC提供了类型检查和自动完成的静态属性：displayName、propTypes和defaultProps。PS:defaultProps与React.FC结合使用会存在一些问题。我们使用 React.FC 来写 React 组件的时候，是不能用
setState的，取而代之的是useState()、useEffect等 Hook API。
const SampleModel: React.FC<{}> = () => {
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
return {
<Button style={{fontSize: '25px'}} onClick={() => handleModalVisible(true)} > 样例</Button>
<Model onClick={() => handleModalVisible(false)} ModalVisible={createModalVisible} />
}
}
二、class ??? extends React.Component
如需定义 class 组件，需要基础 React.Component，React.Component 是类组件，在 TypeScript 中，React.Component 是通用类型，因此要为其提供（可选）prop和state类型参数:
class SampleModel extends React.Component {
state = {
createModalVisible: false,
};
handleModalVisible = (cVisible:boolean) => {
this.setState({createModalVisible: cVisible});
};
return {
<Button onClick={() => this.handleModalVisible(true)}> 样例</Button>
<Model onCancel=({} => this.handleModalVisible(false)} ModalVisible={this.state.createModalVisible} />
}
}
