类型“FC<Props>”的参数不能赋给类型“ForwardRefRenderFunction<unknown, Props>”的参数。 属性“defaultProps”的类型不兼容。 不

本文讲述了在React中,当无状态函数组件(FC)与React.forwardRef结合时遇到的类型错误,并详细介绍了问题原因及解决方案,即如何通过普通函数组件来避免此类错误。

场景:react+ts 父子组件皆为无状态函数式组件,子组件使用了React.forward
报错:类型“FC”的参数不能赋给类型“ForwardRefRenderFunction<unknown, Props>”的参数。
属性“defaultProps”的类型不兼容。
不能将类型“Partial | undefined”分配给类型“undefined”。
不能将类型“Partial”分配给类型“undefined”
原因:报错写的很清晰了,FC与React.Forward不能同时使用
解决:这时就用普通函数组件定义方式

const MenuEditView = (props: Props, ref: any):any => {
}

export default Reacr.Forward(MenuEditView )

就一切正常了嘿

没有与此调用匹配的重载。 第 1 个重载(共 2 个),“(props: Props): Line”,出现以下错误。 不能类型“(props: any) => Element | null”分配给类型“LineDot | undefined”。 不能类型“(props: any) => Element | null”分配给类型“(props: any) => ReactElement<SVGElement, string | JSXElementConstructor<any>>”。 不能类型“Element | null”分配给类型“ReactElement<SVGElement, string | JSXElementConstructor<any>>”。 不能类型“null”分配给类型“ReactElement<SVGElement, string | JSXElementConstructor<any>>”。 第 2 个重载(共 2 个),“(props: Props, context: any): Line”,出现以下错误。 不能类型“(props: any) => Element | null”分配给类型“LineDot | undefined”。 不能类型“(props: any) => Element | null”分配给类型“(props: any) => ReactElement<SVGElement, string | JSXElementConstructor<any>>”。 不能类型“Element | null”分配给类型“ReactElement<SVGElement, string | JSXElementConstructor<any>>”。 不能类型“null”分配给类型“ReactElement<SVGElement, string | JSXElementConstructor<any>>”。ts(2769) Line.d.ts(44, 5): 所需类型来自属性 "dot",在此处的 "IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props>, "string" | "children" | ... 483 more ... | "yAxis"> & InexactPartial<...> & InexactPartial<...>" 类型上声明该属性 Line.d.ts(44, 5): 所需类型来自属性 "dot",在此处的 "IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props>, "string" | "children" | ... 483 more ... | "yAxis"> & InexactPartial<...> & InexactPartial<...>" 类型上声明该属性
03-21
import React from 'react'; import type {FC} from 'react'; import {NavBar, TabBar} from 'antd-mobile'; import { Route, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom'; import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons'; import {StyleSheet, Switch} from 'react-native'; const Bottom: FC = () => { const location = useLocation(); const {pathname} = location; const navigate = useNavigate(); const setRouteActive = (value: string) => { navigate(value); }; const tabs = [ { key: '/home', title: '首页', icon: <AppOutline />, }, { key: '/todo', title: '待办', icon: <UnorderedListOutline />, }, { key: '/message', title: '消息', icon: <MessageOutline />, }, { key: '/me', title: '我的', icon: <UserOutline />, }, ]; return ( <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}> {tabs.map(item => ( <TabBar.Item key={item.key} icon={item.icon} title={item.title} /> ))} </TabBar> ); }; export default () => { return ( <Router initialEntries={['/home']}> <div style={styles.app}> <div style={styles.top}> <NavBar>配合路由使用</NavBar> </div> <div style={styles.body}> <Switch> <Route path="/home"> <Home /> </Route> <Route path="/todo"> <Todo /> </Route> <Route path="/message"> <Message /> </Route> <Route path="/me"> <PersonalCenter /> </Route> </Switch> </div> <div style={styles.bottom}> <Bottom /> </div> </div> </Router> ); }; function Home() { return <div>首页</div>; } function Todo() { return <div>待办</div>; } function Message() { return <div>消息</div>; } function PersonalCenter() { return <div>我的</div>; } const styles = StyleSheet.create({ app: { height: '100%', display: 'flex', flexDirection: 'column', }, top: { flex: 0, borderBottomWidth: 1, borderBottomColor: 'var(--adm-color-border)', }, body: { flex: 1, justifyContent: 'center', alignItems: 'center', }, bottom: { flex: 0, borderTopWidth: 1, borderTopColor: 'var(--adm-color-border)', }, }); 这个你检查下,这个好像没有导出,我准备直接在app.tsx引用,直接加载
03-08
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值