React函数式组件在Chrome调试中嵌套渲染失败问题

核心原因 #

React 对组件命名有强制规则：自定义组件必须以大写字母开头。当你写<test />时，React会把它识别成原生HTML标签（类似<div>、<span>），但浏览器不存在<test>这个原生标签，最终只会渲染一个空的<test>元素，导致页面空白。

修正后的代码 #

function Test() {
    return <p>Test</p>;
}

function app() {
    return <Test />;
}

export default app;

修改后，React会正确识别<Test />为你定义的自定义组件，就能正常渲染出<p>Test</p>内容，页面会显示“Test”。

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