ReactReact 组件

Posted 2022-12-10 嘻嘻的妙妙屋

React 组件

React 的组件可以定义为 函数（React.FC<>）或 class（继承 React.Component） 的形式。

函数式组件 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（注意：defaultProps 与React.FC 结合使用会存在一些问题）。

我们使用 React.FC 来写 React 组件的时候，是不能用 setState 的，取而代之的是 useState()、useEffect 等 Hook API。

const SampleModel: React.FC<> = () =>    //React.FC<>为typescript使用的泛型
	const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
	return 
		/** 触发模态框**/
		<Button style=fontSize:'25px'  onClick=()=>handleModalVisible(true) >样例</Button>
		/** 模态框组件**/
		<Model onCancel=() => handleModalVisible(false) ModalVisible=createModalVisible /> 
	

类组件 class xx extends React.Component

如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在 TypeScript 中，React.Component 是通用类型（aka React.Component<PropType, StateType>），因此要为其提供（可选）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=() => handleModalVisible(false) ModalVisible=this.state.createModalVisible />