使用 JSX 時，必須在 scope 中獲取“反應”

Question

我是新手，我嘗試了以下代碼

人.js

const element = <h1>Hello world</h1>;
export default element;

應用程序.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';



function Hello() {
  return Person.element;
}



class App extends Component {

  render() {

    return (
      <div className="App">
        <Hello></Hello>
      </div>
    );
  }
}

export default App;

但得到以下錯誤

使用 JSX react/react-in-jsx-scope 時，work/my-app/src/person/person.js 3:17 錯誤“React”必須在 scope 中

當我更改為如下所示的簡單問候詞時，它可以正常工作。

人.js

const element = 'hello world';
export default element;

我通過檢查不同的論壇嘗試了不同的方式

1. 導入 ReactDom
2. 在 person.js 中更改為 module.exports=element

Answer 1

在 JS 代碼中使用 HTML 稱為 JSX。 <h1>...</h1>是 JSX。 你需要在使用 JSX 之前導入React 。 只需在使用 JSX 之前轉換 import 語句。

人.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';

const element = <h1>Hello world</h1>;
export default element;

Answer 2

您需要在每個導出組件的文件（在本例中為 App）中導入 React。

Answer 3

最新的 React 17 版本：scope 中無需包含 React

如果您遇到 ESlint 或運行時 CRA 警告，請按照以下臨時步驟進行修復，直到 CRA v4 發布： https://github.com/facebook/create-react-app/issues/9850