无状态组件：必须返回有效的 React 元素（或 null）
Posted
技术标签:
【中文标题】无状态组件：必须返回有效的 React 元素（或 null）【英文标题】：Stateless component: A valid React element (or null) must be returned 【发布时间】：2017-05-06 00:17:51 【问题描述】：我是 ReactJS 的新手。
我正在尝试使用以下代码显示 Hello world，但我收到以下错误消息：
我错过了什么？
App.js 代码
//App.js`
import React from 'react';
const App = () => "<h1>Hello World!</h1>";
export default App;
index.js 代码
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
/public/index.html 的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
【问题讨论】：
对不起@F***Schultz 你是什么意思？ 不要在 React 元素周围使用引号 ("")，试试这样：const App = () => <h1>Hello World!</h1>;。使用 JSX 或 React.createElement。
哇！谢谢。成功了！
错误说明了一切：“必须返回有效的 React 元素（或 null）”。您正在返回一个 string，它既不是 null 也不是 React 元素。
【参考方案1】：
您不能将 JSX 元素用引号括起来。
改变这个
const App = () => "<h1>Hello World!</h1>";
通过这个
const App = () => <h1>Hello World!</h1>;
你也可以这样写
const App = () =>
return <h1>Hello World!</h1>;
;
或者像这样
const App = () =>
return (
<h1>
Hello World!
</h1>
);
;
【讨论】：
【参考方案2】：你也可以这样写，避免return语句。
请注意没有花括号，我花了一些时间才注意到它们是简单的括号。
const App = () => (
<h1>
Hello World !
</h1>
)
【讨论】：
难道你不能通过将 JSX 压缩为一行并将其全部移动到与箭头相同的行来避免括号吗？ 当然可以，但是如果您有多个 html 元素，那将无法正常工作。大多数组件的标记往往比我的示例多一点。以上是关于无状态组件：必须返回有效的 React 元素（或 null）的主要内容，如果未能解决你的问题，请参考以下文章
React 无状态组件的 TypeScript 返回类型是啥？
React 功能组件 - 当组件返回元素数组时，如何将 refs 传递回父级？