React新手遇react/jsx-no-undef报错 函数组件浏览器无法显示

你代码存在两处问题，对应报错和后续可能出现的运行异常：

• 'Hello' is not defined react/jsx-no-undef报错的核心原因：你在HelloWorld组件内部使用了<Hello />组件，但全局没有定义过名为Hello的组件，ESLint的JSX语法校验规则检测到未声明的组件引用就会抛出该错误。
• 隐藏的拼写错误：你导入的是ReactDOM，但调用渲染方法时写的是ReactDom.render，大小写不匹配，后续运行时会抛出ReactDom is not defined的错误。

修复方案 #

方案1：补充定义Hello组件 #

如果业务需要用到Hello组件，补全组件定义即可，完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

// 补全Hello组件定义
function Hello() {
  return <span>Hello</span>
}

function HelloWorld() {
  return (
   <div>
        <Hello/>
   </div>
  )
}

// 修正ReactDOM大小写
ReactDOM.render(
<HelloWorld/>, document.querySelector('#root')
);

方案2：删除未定义的Hello组件引用 #

如果不需要拆分Hello组件，直接删除<Hello/>的调用即可，完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return (
   <div>
        Hello World
   </div>
  )
}

ReactDOM.render(
<HelloWorld/>, document.querySelector('#root')
);

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