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）

2 个答案: