React网站函数组件运行后不显示问题求助

你的代码存在两个关键问题导致组件无法正常渲染：

• 组件命名不规范：React规定自定义组件名必须以大写字母开头，你写的bannner（还存在拼写错误，应为Banner）和cart都是小写，React会将它们识别为原生HTML标签而非自定义组件，因此不会执行组件逻辑进行渲染。
• 变量拼写错误：cart组件里的pixhero是笔误，正确应为prixhero，这个错误会引发代码报错，中断组件渲染流程。

修正后的代码如下：

function Banner() {
    const title = "c'est pur 😎"
    return (<h1>{title}</h1>)
}

function Cart() {
    const prixbedo = 10
    const prixhero = 20
    const prixcoc = 70
    return (<div>
            <h2>Panier</h2>
            <ul>
            <li>bedo : {prixbedo}$</li>
            <li>heroïne : {prixhero}$</li>
            <li>cocaïne : {prixcoc}$</li>
            </ul>
        </div>)
}

ReactDOM.render(<div><Banner /><Cart /></div>, document.getElementById("root"))

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