react-tsx学习过程的报错记录
- Type '...' is not assignable to type 'IntrinsicAttributes'. Property '...' does not exist on type 'IntrinsicAttributes'
报错原因: 父子组件传值时未在子组件定义props类型
解决方法: typescript进行类型定义
//父组件
<RegisterForm changeStatus = { changePage } />
// 子组件
interface RegisterFormProps {
changeStatus?: Function,
}
const RegisterForm: React.FC
- Type 'Function | undefined' is not assignable to type 'MouseEventHandler | undefined'
报错原因: 函数式组件,父子组件传方法时解构直接传递方法名,因为类型可能是Function,也可能是undefined ,所以报类型错误
解决方法: 最好直接用props代替,方法使用 props.方法名 进行调用
const LoginForm: React.FC
}
// 改为
const LoginForm: React.FC = (props: any) => {
你的方法()} >
}
<你的组件/>
// 你的组件
(
-
useNavigate() may be used only in the context of a Router component
报错原因: 不能在路由组件外部调用useNavigate hook
解决方法: 使用BrowserRouter包裹你的组件
实测无法使用数组路由定义,RouterProvider包裹也没用, 后续找到新方式再追加更新
...
...
)