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

Question

我是 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>

Answer 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>
  );
};

Answer 2

也可以这样写，避免return语句

注意没有花括号，我花了一些时间才注意到它们是简单的括号。

const App = () => (
  <h1>
    Hello World !
  </h1>
)

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

Stateless component: A valid React element (or null) must be returned

html

javascript

jsx

ecmascript-6

reactjs