无状态组件：必须返回有效的 React 元素（或 null）答案

【问题标题】：Stateless component: A valid React element (or null) must be returned无状态组件：必须返回有效的 React 元素（或 null）
【发布时间】：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>

【问题讨论】：

对不起@FabianSchultz 你是什么意思？
不要在 React 元素周围使用引号 ("")，试试这样：const App = () => <h1>Hello World!</h1>;。使用 JSX 或 React.createElement。
哇！谢谢。成功了！
错误说明了一切：“必须返回有效的 React 元素（或 null）”。您正在返回一个 string，它既不是 null 也不是 React 元素。

标签： javascript html reactjs ecmascript-6 jsx

【解决方案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 元素，那将无法正常工作。大多数组件的标记往往比我的示例多一点。