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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景: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
### React Functional Component with Props 类型定义与用法 在现代 React 开发中,函数式组件(Functional Components, 简称 FC)因其简洁性和可维护性而被广泛采用。通过 TypeScript 定义函数式组件的 `Props` 类型可以增强代码的安全性和可读性。 #### 函数式组件基础 函数式组件本质上是一个纯 JavaScript 函数,它接收一个名为 `props` 的参数并返回 JSX 元素[^1]。以下是其基本结构: ```tsx const MyComponent: React.FC<MyProps> = (props) => { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> ); }; ``` 在此示例中,`MyComponent` 是一个函数式组件,它的类型由 `React.FC<MyProps>` 提供,其中 `MyProps` 表示传递给该组件的属性接口。 #### 使用 Props 接口定义 为了使函数式组件更加健壮和易于理解,通常会先定义一个 `Props` 接口来描述所需的数据形状。例如: ```typescript interface MyProps { title: string; description?: string; // 可选属性 } const MyComponent: React.FC<MyProps> = ({ title, description }) => { return ( <div> <h1>{title}</h1> {description && <p>{description}</p>} </div> ); }; ``` 上述代码展示了如何利用解构语法简化对 `props` 属性的访问,并处理可能存在的可选字段。 #### 默认 Props 设置 如果某些属性具有默认值,则可以通过设置 `defaultProps` 来实现这一功能。然而,在使用 `React.FC` 时需要注意,默认值应直接值于组件本身而非单独声明 defaultProps 对象: ```typescript interface GreetingProps { name?: string; } const Greeting: React.FC<GreetingProps> = ({ name = 'Guest' }) => { return <span>Hello, {name}!</span>; }; // 或者更传统的方式: Greeting.defaultProps = { name: 'Guest', }; ``` #### 儿子向父亲传值机制简介 虽然本问题是关于函数式组件及其 `Props` 类型定义,但值得一提的是父子组件间的通信也是 React 应用开发中的重要部分之一。对于儿子到父亲方向上的数据流动,一般借助回调函数完成。如下所示: ```tsx class Parent extends React.Component<{ onChildClick: () => void }> { handleClick = () => console.log('Clicked from child'); render() { return <Child onClick={this.handleClick} />; } } const Child: React.FC<{ onClick: () => void }> = ({ onClick }) => ( <button onClick={onClick}>Notify Parent</button> ); ``` 以上例子说明了父级将方法作为 prop 下放到子级以便后者调用的情况。 #### 总结 - 函数式组件是一种轻量化的替代类组件的方法。 - 结合 TypeScript 能够显著提升应用质量,推荐始终为 props 明确指定类型。 - 数据可以在同层次之间双向传输——从父母至子女以及反之亦然皆可行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值