Question

我正在用 case ii App.js模块学习React js，因为 render（）方法用于将JSX转换为dom元素，所以我必须导入React在Person.js中，我们正在创建一个箭头函数，然后将其导出，以便可以将其导入并在App模块中使用渲染函数，无论我们在App模块中导入React的方式如何，它将在模块person中转换JSX 并在DOM上呈现，但是当我们在Person.js中删除以下代码时引发错误时

import React from 'react' in Person.js

它引发错误

如果我们在React类提供的方法（如render）中声明JSX，则

React'必须在使用JSX的范围内。

有人可以解释

i）为什么我们需要在Person.js中导入react？

ii）为什么删除上面的代码时会引发错误？

情况i）

Person.js

 import React from 'react'

 const person = () => {
 return <p>This is person module used inside app module</p>
 };

 export default person

案例ii）

App.js

import React, { Component } from 'react';
import './App.css'
import Person from './Person/Person'

class App extends Component {
render() {
return (
  <div className="App">
    <h1>this is app module and i am being used as the root component</h1>
     <Person/>
  </div>
);}}

export default App;

Answer 1

如果您向Babel提供一些JSX，请you will see that JSX is just sugar for React.createElement calls。这就是为什么如果我们使用JSX，则需要导入React。

输入

<p>This is person module used inside app module</p>

输出

"use strict";

React.createElement(
  "p",
  null,
  "This is person module used inside app module"
);

Answer 2

当您尝试在JavaScript文件中使用jsx时，普通的编译器甚至babel都无法理解。尽管普通的编译器从不了解它。但是无论如何，您想说您的编译器我在文件中提供了一个jsx。

import React from 'react';

上面是指示babel进行的方法，现在对您来说这是一项简单的任务。

<p>This is person module used inside app module</p>

上面是一个jsx语句。因此，无论何时使用它，都需要导入React。同样，在很多地方，我们不需要在动作，reduce等中使用它，因为那里没有jsx。

为什么我们应该从'react'中使用import React

2 个答案: