React组件报错：'Message'无法作为JSX组件使用的问题求助

Hey there! 我一眼就看出你遇到的问题啦，咱们来快速解决它～

问题原因分析 #

你写的Message组件现在没有返回任何有效的JSX内容！函数里的<h1>hello world</h1>只是写了一条语句，但没有通过return返回出去，所以这个组件的返回类型是() => void（也就是没有返回值）。而React要求组件必须返回一个ReactNode类型的值（比如JSX元素、null、字符串这些），这就导致了类型不匹配的报错。

解决方案：给组件添加返回值 #

只需要给你的Message组件加上return关键字，把JSX元素返回出去就行：

function Message(){
  // 加上return，把JSX元素返回
  return <h1>hello world</h1>;
}

export default Message;

如果你喜欢更简洁的写法，也可以用箭头函数的隐式返回（不需要写return，用括号包裹JSX即可）：

const Message = () => (
  <h1>hello world</h1>
);

export default Message;

验证效果 #

修改完Message组件后，你的App组件里引用<Message />就不会再报错啦，页面上也能正常显示"hello world"的标题。

备注：内容来源于stack exchange，提问作者kiarash afarin