React 有望在全球范围内可用

IT技术 javascript reactjs webpack babeljs react-jsx
2021-04-11 07:26:47

我正在使用带有 babel 和 webpack 的 React (@13.3)。

我有一个定义如下的组件：

import BaseComponent from './BaseComponent';

export default class SomeComponent extends BaseComponent {
    render() {
        return (
            <div>
                    <img src="http://placekitten.com/g/900/600"/>
            </div>
        );
    }
}

但我收到以下错误：

未捕获的 ReferenceError：React 未定义

我理解错误： JSX 位被编译到React.createElement(...)但React不在当前范围内，因为它没有被导入。

我的问题是：解决此问题的干净方法是什么？我是否必须以某种方式React使用 webpack 全局公开？

使用的解决方案：

我遵循了@salehen-rahman 的建议。

在我的 webpack.config.js 中：

module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'react-hot!babel?plugins[]=react-require'
    }, {
        test: /\.css$/,
        loader: 'style!css!autoprefixer?browsers=last 2 versions'
    }]
},

我还需要修复我的测试，所以我将它添加到文件 helper.js 中：

require('babel-core/register')({
    ignore: /node_modules/,
    plugins: ['react-require'],
    extensions: ['.js']
});

然后使用以下命令启动我的测试：

mocha --require ./test/helper.js 'test/**/*.js'
3个回答

我的问题是：解决这个问题的干净方法是什么？我是否必须以某种方式使用 webpack 全局公开 React ？

添加babel-plugin-react-require到您的项目中，然后修改您的 webpack 的 Babel 配置以具有类似于以下内容的设置：

loaders: [
  {
    test: /.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      stage: 0,
      optional: ['runtime'],
      plugins: [
        'react-require' // <-- THIS IS YOUR AMENDMENT
      ]
    },
  }
]

现在，一旦您应用了配置更新，您就可以初始化 React 组件而无需手动导入 React。

React.render(
  <div>Yippee! No <code>import React</code>!</div>,
  document.body // <-- Only for demonstration! Do not use document.body!
);

但是请记住，babel-plugin-react-require转换您的代码以仅在特定文件中存在 JSX 标记时自动包含 React 导入，对于特定文件。对于不使用 JSX 但由于某种原因需要 React 的所有其他文件，您必须手动导入 React。

对我有用，我添加了更多指向原始帖子的指针。谢谢 ！
2021-05-27 07:26:47

如果您在节点module目录中有react，则可以import React from 'react';在文件顶部添加。

我可以做到这一点，但是导入之后没有实际使用感觉很奇怪。嗯，它是，但不是直接由我：/。
2021-05-25 07:26:47

您可以使用 Webpack 的ProvidePlugin. 要使用，请更新 Webpack 配置中的插件部分以包含以下内容：

plugins: [
  new webpack.ProvidePlugin({
    'React': 'react'
  })
]

但是，这并不能解决测试问题。

其它你可能感兴趣的问题
上一篇react - 无法读取未定义的属性“调用” 下一篇无法通过 axios 从本地 json 文件中获取数据