Question

我是新来的人，我尝试了以下代码

person.js

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

App.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;

但是出现以下错误

work / my-app / src / person / person.js 3:17使用JSX react / react-in-jsx-scope

时，错误'React'必须在范围内

当我如下更改为一个简单的问候词时，它可以正常工作。

person.js

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

我通过检查不同的论坛尝试了不同的方式

导入ReactDom
in person.js更改为module.exports = element

Answer 1

在JS代码中使用HTML被称为JSX。 <h1>...</h1>是JSX。使用JSX之前，您需要导入React。只需在使用任何JSX之前先移入导入语句即可。

person.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 版本：无需在范围内包含 React

如果您遇到 ESlint 或运行时 CRA 警告，请按照以下临时步骤进行修复，直到 CRA v4 发布：https://github.com/facebook/create-react-app/issues/9850

使用JSX时，必须在“反应”范围内

3 个答案: