17

我的代码只有在导入 React 后才有效，但我没有在任何地方使用 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 ？

4

6 回答 6

21

尽管您没有显式使用您导入的 React 实例，但 JSX 被转译为React.createElement()调用，调用它使用它。

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

于 2016-04-12T09:20:06.123 回答
4

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

每当您使用速记<Component />代码时，实际发生的事情是 Babel 将 JSX 转换为常规 Javascript。

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

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

于 2017-07-07T17:25:19.277 回答
3

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

(
   <div>comp </div>
)

被转译为

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

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

您可以随时参考https://babeljs.io以了解 get 转换为什么。

于 2017-06-05T08:39:51.933 回答
2

对于 React 17 之前的React 版本或指定的较旧的主要版本不包括新的 JSX 转换（请参阅博客），在每个组件文件中导入 React 是 JSX 转换所必需的。然而，在 React 17 和一些指定的旧版本（包括新的转换）中，这不再是必需的，因为它的新转换不需要它。

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

于 2020-12-08T03:47:05.443 回答
0

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

React.createElement('div', null, 'comp')
于 2016-06-11T15:08:27.090 回答
0

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

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

React.createElement(...)

所以你实际上是在使用 React :)

于 2020-01-02T16:51:46.270 回答