React中无法导入或导出类/函数问题求助

嘿，我完全懂你卡在这里的焦虑——刚学React就遇到卡壳的小问题，真的很影响推进节奏！别担心，你的代码其实只差一个小细节：React要求自定义组件的名称必须以大写字母开头，小写的组件名会被React误认为是原生HTML标签，自然就不会渲染你写的组件内容啦。

下面是修改后的代码，你替换后就能正常显示组件内容了：

1. 修改 funccomp.js #

把组件名改成大写开头的FuncComp：

import React from 'react'
function FuncComp() {
    return <p>Fucntional Comp</p>
}
export default FuncComp

2. 修改 classcomp.js #

同样把类组件名改成ClassComp：

import React from 'react'
class ClassComp extends React.Component{
    render(){
        return <p>class ClassComp extends React.Component</p>
    }
}
export default ClassComp

3. 修改 App.js #

导入和使用组件时也要对应改成大写开头的名称：

import React from 'react'
import FuncComp from "./comp/FuncComp"
import ClassComp from "./comp/ClassComp"
function App() {
    return (
        <div>
            <h1>hello01</h1>
            <FuncComp />
            <ClassComp />
        </div>
    );
}
export default App;

这样修改后，你的函数组件和类组件内容就能正常渲染出来啦！以后写React组件记得都用大写开头命名，这是React的核心约定之一，避免和原生标签混淆~

内容的提问来源于stack exchange，提问作者Harry K