ReactJS中无法在App组件内使用自定义resturant组件

问题核心原因：React规定自定义组件的名称必须以大写字母开头。你当前的组件名resturant是小写开头，React会将其识别为普通HTML原生标签，而非你编写的自定义组件，因此不会渲染该组件内容。

具体修复步骤： #

1. 修改resturant组件的定义代码，将组件名改为大写开头的Resturant：

import React from 'react'

const Resturant = () => {
  return (
    <>
      <div>
          <h1>
              Yo I am resturant
          </h1>
      </div>
    </>
  )
}

export default Resturant

2. 在App组件中同步更新导入语句和组件调用的名称：

import React from 'react'
import Resturant from './components/basics/resturant'


const App = () => {
  return (
    <>
      <h1>This is App</h1>
      <Resturant />
    </>
  )
}


export default App

完成以上修改后，你的Resturant组件就能正常在页面上渲染了。

内容的提问来源于stack exchange，提问作者Deepak yadav