无法看到导入的组件数据

Question

我正在 next.js 的页面中导入一个组件，我没有收到任何错误，但我看不到组件的内容，它的行为就像组件存在一样

主页 / index.js

import Link from "next/link";
import Fragment from "react";
import mainHeroComponent from "../components/heroSection/mainherocomponent";


function HomePage(){
  return (
    <div>
      hello
      <mainHeroComponent />
    </div>
  );

}

export default HomePage;

和 mainHeroComponent

import {Fragment} from 'react'



function mainHeroComponent(props) {
  return (
    <Fragment>
      <div className="hero-section">
        <div className="hero-section-text">
          <h1>Hi, I'm ROBO</h1>
        </div>
      </div>
    </Fragment>
  ) 
}

export default mainHeroComponent;

在上面的代码中 hello 是可见的，但是 mainhero 的内容是不可见的

Answer 1

您的组件不可见，因为它的名称以小写字母开头：

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

将其重命名为 MainHeroComponent.

后应该会呈现

无法看到导入的组件数据

Not able to see the data of the component imported

reactjs

next.js