问题描述:
在使用 react 写项目时候遇到了一个错误。
Property ‘updateForm’ does not exist on type ‘JSX.IntrinsicElements’.
//UpdateForm 中代码:
const updateForm: FC<UpdateFormProps> = (props) => {
//业务逻辑省略
};
export default updateForm;
//父级引用代码:
import updateForm from './components/UpdateForm';
//其他代码省略
<updateForm />
原因分析:
在 react 官方文档中指明 用户定义的组件必须以大写字母开头
以小写字母开头的元素代表一个 HTML 内置组件,比如 <div> 或者 <span> 会生成相应的字符串 ‘div’ 或者 ‘span’ 传递给 React.createElement(作为参数)。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件,如 <Foo /> 会编译为 React.createElement(Foo)。
建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件,则在 JSX 中使用它之前,必须将它赋值给一个大写字母开头的变量。
解决方案:
将代码中的标签首字母修改为大写,如下:
//UpdateForm 中代码:
const UpdateForm: FC<UpdateFormProps> = (props) => {
//业务逻辑省略
};
export default UpdateForm;
//父级引用代码:
import UpdateForm './components/UpdateForm';
//其他代码省略
<UpdateForm/>