React.FC添加参数的几种方式By TS

一、定义时 props的类型已知

举例：

将类型添加到函数参数

interface TodoListItemProps { 
    todo: { 
        text:string 
        complete:boolean 
    } 
}
const TodoListItem = ({ todo }: TodoListItemProps) => {
    console.log(todo)
    return ( 
    // ... 
    ); 
};
复制代码

将类型作为泛型参数添加到FC类型

interface TodoListItemProps { 
    todo: { 
        text:string 
        complete:boolean 
    } 
}
const TodoListItem: React.FC<TodoListItemProps> = ({ todo }) => {
    return( 
        // ... 
    );
};
复制代码

1、将类型添加到函数参数

interface IProps {
  name: string
}
 
const App = (props: IProps) => {
  const {name} = props;
 
  return (
    <div className="App">
      <h2>{name}</h2>
    </div>
  );
}
 
export default App;
复制代码

2、将类型作为泛型参数添加到FC类型

使用React.FunctionComponent<P={}>来定义，也可以使用其简写React.FC<P={}>。 它是在ts中使用的一个泛型接口，可以接收一个参数，参数表示props的类型，这个参数不是必须的。

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

interface IProps {
  name: string
}
 
const App: React.FC<IProps> = (props) => {
//解构出 name 的值
  const {name} = props;
  return (
    <div className="App">
      <h2>{name}</h2>
    </div>
  );
}
 
export default App;
复制代码

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
    console.log('message:', message)
    return (
      <div>{message}</div>
    )
);
复制代码

检查react类型，可以看到：

type React.FC<P = {}> = React.FunctionComponent<P>
复制代码

interface FunctionComponent<P = {}> { 
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; 
    propTypes?: WeakValidationMap<P>; 
    contextTypes?: ValidationMap<any>; 
    defaultProps?: Partial<P>; 
    displayName?: string; 
}
复制代码

与第一种普通的函数声明方法相比：

1、React.FC 对静态属性：displayName，propTypes 和 defaultProps 提供了类型检查和自动补全（注意：defaultProps与React.FC结合使用会存在一些问题）。

2、React.FC 显式地定义了返回类型，其他方式是隐式推导的。

3、React.FC 为 children 提供了隐式的类型（ReactElement | null）。

4、当使用这种形式来定义函数组件时，props中默认会带有children属性，它表示该组件在调用时，其内部的元素。举例如下：

App.tsx

import Child1 from "./child1";
import Child2 from "./child2";
 
interface IProps {
  name: string;
}
const App: React.FC<IProps> = (props) => {
//其他组件使用App组件，从其传入的 props里，解构出 name的值
  const { name } = props;
  return (
  //将 name的值传给子组件
    <Child1 name={name}>
      <Child2 name={name} />
      TypeScript
    </Child1>
  );
};
 
export default App;
复制代码

Child1.tsx

在Child1组件中打印了children属性，它的值是一个数组，包含Child2对象和后面的文本：

interface IProps {
  name: string;
}
const Child1: React.FC<IProps> = (props) => {
  const { name, children } = props;
  console.log(children);
  return (
    <div className="App">
      <h2>{name}</h2>
    </div>
  );
};
export default Child1;

作者：混得最差
链接：https://juejin.cn/post/7123111666018942990
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。