React新手无法将conditionalView组件渲染到App组件问题求助

问题原因 #

React 有强制规范：自定义组件的名称必须以大写字母开头，小写开头的标签会被默认识别为原生 HTML 标签，不会触发自定义组件的渲染逻辑，这就是你页面没有展示对应内容的核心原因。

修复步骤 #

• 修改 conditionalView.js 组件的类名与导出命名，首字母改为大写：

import React, { Component } from 'react'

export class ConditionalView extends Component {
    render() {
        return (
            <div>
                <h2>Conditional View</h2>
            </div>
        )
    }
}

export default ConditionalView

• 修改 App.js 中导入、使用组件的写法，同步改为大写开头：

import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
// 导入时改为大写
import ConditionalView from './conditionalView';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" />
        <Bike name="Caliber 125"  />
        <Car name="Maruti 800"  /> */}
       {/* <FnEvent />
       <ClsEvent /> */}
        {/* <ClsEventBind /> */}
       {/* 使用时也用大写开头的标签 */}
       <ConditionalView />
      </header>
    </div>
  );
}

export default App;

额外冗余代码提示 #

你当前 index.js 中重复导入了 reactDom，属于无效代码，可以删除对应的 import reactDom from 'react-dom'; 行，不会影响功能运行。

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