React简单自定义组件在浏览器中无法渲染，代码存在什么问题？

问题根因 #

React 强制要求自定义组件的名称必须以大写字母开头，你写的wwhello为小写开头，React会将其判定为内置的原生HTML标签，不会按自定义组件逻辑解析渲染，自然看不到输出内容。

修复方案 #

• 将函数组件名改为大写开头，比如改为Wwhello
• 同步修改ReactDOM.render中调用的组件标签为大写开头

修改后的完整可运行代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Wwhello(){
  return <div>
          <h1>Hello</h1>
          <p>Summa</p>
        </div>;
}

ReactDOM.render(
  <Wwhello/>,
  document.getElementById('root')
);

如果修改后仍无法正常渲染，可以额外检查项目入口的public/index.html文件中是否存在id="root"的DOM节点。

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