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

时间:2018-07-17 19:15:34

标签: javascript reactjs react-router react-redux

我正在用 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;

2 个答案:

答案 0 :(得分:7)

如果您向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"
);

答案 1 :(得分:1)

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

import React from 'react';

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

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

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