Question

我的代码仅在导入React之后才有效，但我没有在任何地方使用反应，而是使用reactDom

import ReactDOM from 'react-dom'
import React, {Component} from 'react'

class App extends Component {
  render () {
    return (
      <div>comp </div>
    )
  }
}

//ReactDOM.render(<App/>, document.getElementById('root'))
ReactDOM.render(<div>sv</div>, document.getElementById('root'))

为什么需要导入React ??

Answer 1

虽然您没有明确使用您导入的React实例，但JSX会被转换为使用它的React.createElement()调用。

在您的示例中，Babel将<div>comp </div>转换为React.createElement('div', null, 'comp')。

Answer 2

需要进行React导入，因为以下JSX代码： -

(
   <div>comp </div>
)

被转换为

React.createElement(
  "div",
  null,
  "comp "
);

这是您需要导入React的原因; 我希望能回答你的问题。

您始终可以参考https://babeljs.io来了解将哪些内容转换为内容。

Answer 3

这是一个非常有趣的问题，因为你的代码并没有像使用React那样看起来，但它很棘手

任何时候你使用速记<Component />代码实际发生的事情是由Babel将JSX转换为常规Javascript。

<Component/>
// Is turned into
React.createElement(...)

因此代码确实需要导入React，尽管它对读者来说并不明显

Answer 4

对于 React 17之前的版本或指定的较早的主要版本（不包括新的JSX转换（请参阅blog），对于JSX转换，必须在每个组件文件中导入React 。但是，在React 17和某些指定的旧版本（包括新转换）中，由于它不需要新转换，因此不再需要此操作。

参考：https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Answer 5

我曾经认为如果ReactDOM使用React，那么它将负责导入它。但事实并非如此。在源代码中的JSX转换之后，很明显它明确地使用了React包。因此它是必需的。

React.createElement('div', null, 'comp')

Answer 6

如果使用JSX DSL，您需要导入React（几乎每个人都这样做）

根据其他答案，编译器通常会将JSX标签更改为

React.createElement(...)

所以您实际上正在使用React：）

为什么要导入React

6 个答案: