React自定义组件helloWorld未渲染内容的原因是什么？如何正确实现？

问题原因 #

• React有明确的命名规范：自定义组件必须以大写字母开头，小写开头的标签会被React默认识别为原生HTML内置标签，不会当成你定义的自定义组件处理，所以你写的<helloWorld/>会被判定为无效的原生标签，不会触发对应组件的渲染逻辑。

正确写法 #

把组件名首字母改为大写，调用时也对应使用大写开头的标签即可：

function HelloWorld(){
  return(
    <h1>Hola mundo</h1>
  )
}

function Card() {
  return (
    <div className="card"> Your message is: <HelloWorld/> </div>
  );
}

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