导入语句:有没有React？

Question

关于是否有必要导入React无状态组件并且找不到任何关于它的文档,有一些关于工作的辩论.所以:

//OPTION 1
import React, { PropTypes } from 'react';

//OPTION 2
import { PropTypes } from 'react';

export const Button = ({ action }) => {
  return (
    <button onClick={action}>Submit</button>
  );
}

Button.propTypes = {
  action: PropTypes.func.isRequired,
};

有人说使用JSX时,选项1是最佳实践; 其他一些思考组件将失败,而选项2.

我已经尝试了两种,我看不出任何差异,该组件仍然适用于这两种情况.

选项1或选项2:哪一个是正确的？

Answer 1

使用选项1因为babel会将你的jsx转换
<button onClick={action}>Submit</button>
为
React.createElement("button", { onClick: action }, "Submit");

所以你看到反应必须在范围内.您有两种选择:

1. 从'react'导入React;
2. 或全局定义React

Answer 2

这取决于您如何构建文件.如果您正在使用像webpack这样的模块捆绑器,并且没有全局React模块的概念,那么遗漏React将抛出错误React is not defined.

这是因为:

let C = <div />

变成:

let C = React.createElement("div", null)

因此,在该特定模块内部.. React不会导入,因此将在未定义的变量上跳闸.

您可以React向窗口命名空间公开,然后您不需要将其导入到每个文件中.随你(由你决定.