无状态功能组件和`react` import

Question

我面临与此处描述的相同的问题 https://github.com/babel/babel/issues/2504

因此，任何只有无状态组件的文件都需要react导入import React from 'react';，这有点烦人（eslint给出错误作为未使用的变量;我理解的可以被抑制，仍然... ）。有没有办法避免在基于webpack的设置中进行此导入。

感谢。

Answer 1

我有同样的问题。然后，我发现了这个：

babel-plugin-react-require

这会自动添加所需的require或import调用，以便将'react'导入您的无状态组件模块。

P.S。如果您使用webpack和babel6，请确保您没有将jsx-loader用于JSX文件。我遇到了这个错误，然后我意识到不再需要jsx-loader了。只需使用：

babel-preset-react

Answer 2

您可以使用Webpack的ProvidePlugin（https://github.com/webpack/docs/wiki/shimming-modules#plugin-provideplugin）：

new webpack.ProvidePlugin({
    React: "react"
})

现在您可以在每个模块中使用React，而无需明确写入import React from 'react'