首页 文章

我们为什么要使用'react' [重复]的导入React

提问于
浏览 次
2

这个问题在这里已有答案：

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

import React from 'react' in Person.js

它会引发错误

如果我们在React类提供的方法（如render）中声明JSX它应该给出错误，那么在使用JSX时React'必须在范围内 .

有人可以解释一下

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

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;
javascript reactjs react-router react-redux

2 回答

  • 7

    如果你给Babel一些JSX，you will see that JSX is just sugar for React.createElement calls . 这就是我们在使用JSX时需要导入React的原因 .

    Input

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

    Output

    "use strict";

React.createElement(
  "p",
  null,
  "This is person module used inside app module"
);
    回复于
  • 1

    当您尝试在javascript文件中使用jsx时，您的普通编译器以及甚至babel都无法理解它 . 虽然普通编译器从不理解它 . 但无论如何你想说你的编译器我在文件中为你提供了一个jsx .

    import React from 'react';

    以上是指导babel继续的方式，现在对你来说这是一项轻松的任务 .

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

    以上是jsx的陈述 . 因此，当您使用它时，您将需要React导入 . 同样地，我们在很多地方都不需要动作，减速器等，因为我们没有jsx .

    回复于

相关问题