技术栈
React / Ant Design Pro
背景
第一次使用antd pro 开发, 需要自定义一个全局业务组件,
问题
照着原项目在src/components 下创建个组件 , export default ComponentName , 然后再pages里引入 import { ComponentName } from ‘components’ , 于是报错 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
查了一下这是ES6 模块导出及引入的问题 , 仔细检查对比了其他业务组件的导出和引入, 都是这样做的, 实在想不通~
看到这个帖子 : https://www.cnblogs.com/wind-wang/p/9453167.html
终于解决了!!! 感谢原博!!
解决办法
组件 :
import React from 'react'
const TextEditor = ({
data }) => {
return (
<div>
我是个组件~
</div>
)
}
export default TextEditor
页面引入组件 :
import ComponentName from 'components/TextEditor';
说在最后
至今没想通为什么按照原项目的方式导出引入报错 (枯了…)
因为我在pages components 下同样方式也没问题呀~~~~~~~~
哎, 要好好补习ES6了 (哭哭哭~~~~)