一、定义时 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
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。