React嵌套组件不渲染求助：新手开发者遇组件被忽略问题

嘿，我帮你找到问题的根源啦！

你遇到的嵌套组件不渲染的问题，核心原因是React的组件命名规范：React规定自定义组件的名称必须以大写字母开头。如果组件名是小写开头，React会把它当成原生HTML标签（比如<div>、<span>这类）来处理，而<testComponent>并不是一个合法的原生HTML标签，所以自然不会渲染出任何内容。

只需要做两处简单修改就能解决：

• 把自定义组件的类名从testComponent改为TestComponent（首字母大写）
• 在App组件的render方法里，把<testComponent/>改成<TestComponent/>

修改后的App.js代码如下：

import React, { Component } from 'react';
import './App.css';

// 首字母大写，符合React组件命名规范
class TestComponent extends React.Component{
  render(){
    return <h1>Hello World</h1>
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <TestComponent/> {/* 这里同步修改为大写开头 */}
        Lorem ipsum
      </div>
    );
  }
}

export default App;

修改完成后重新运行npm start，你就能看到页面上同时显示Hello World和Lorem ipsum啦～

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