React导入函数组件未渲染？命名/默认导出问题排查

错误原因 #

React 明确规定：自定义函数组件的名称必须以大写字母开头。以小写字母开头的标签会被 React 识别为原生 HTML 标签，而非自定义组件，因此代码中的 <myFunc /> 和 <myFn /> 并未被当作组件渲染，导致仅显示部分内容。

修正后的代码示例 #

1. 修改 namedExport.js，将组件名改为大写 #

const name = "xyz";
const age = 20;

const MyFunc = () => {
    const name = "abc";
    const age = 21;
    return (<>
    <h2>{name} is {age} years old.</h2>
    </>);
}

export {name, age}
export {MyFunc}

2. 修改 defaultExport.js，将组件名改为大写 #

const MyFunction = () => {
    const name = "ijk";
    const age = 22;
    return (<>
    <h3>{name} is {age} years old.</h3>
    </>);
}

export default MyFunction

3. 修改 App.js 中的导入与组件调用 #

import { name, age, MyFunc } from "./namedExportTest";
import MyFn from "./defaultExportTest";

function App() {
  return (
    <div className="App">
      <h1>Hi Everyone</h1>
    </div>
  );
}

function Exports() {
  return (
    <>
      <div className="exportNamed">
        <h1>My name is {name}, I am {age}.</h1>
      </div>
      <MyFunc />
      <MyFn />
    </>
  );
}

export {Exports};
export default App;

修改后重新运行项目，即可得到预期的完整输出：

Hi Everyone //in h1 tag
My name is xyz, I am 20. //in h1 tag
abc is 21 years old. //in h2 tag
ijk is 22 years old. //in h3 tag

内容的提问来源于stack exchange，提问作者Viknesh k m