react 使用const定义html标签报错

Question

使用 create-react-app 创建的项目，
渲染大概是在index.js中import App.js，然后在index.js中最终render。
而App.js最终会export default App;
要求这个App必须是String/class/function
但发现如果在App里面设置const定义的html tag的的话，就会报错：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

结构大概是

...
const A = <p>this is A. </p>

function App() {
    return (
        <div>
            <p>qwertyuiop</p>
            <A />
        </div>
    )
}

如果把const A改为function A就不会有问题

function A() { return (<p>this is A. </p>) }

请问为什么不能这么用？是一般都不这么用吗？还是有什么用法区分？

Answer 1

建议看一下react文档，了解一下什么是JSX