React JSX 文件给出错误“ Can not read property‘ createElement’of unDefinition”

我有一个使用 npm test运行的文件 test _ stuff. js

它看起来差不多是这样的:

import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';


const myProvider = (
<MyProvider>
</MyProvider>
);


describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});

不幸的是，我得到了错误

/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^


TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)

那是什么意思？我从“反应”成功地导入了“反应”，那么为什么“反应”是未定义的呢？这是一种反应。反应，不管那是什么意思。

108464 次浏览
小开
最佳答案

要导入 React do import React from 'react'，如果要导入的内容不是该模块或文件中的默认导出，则添加括号。为了防止反应，它是默认的导出。

这可能适用于其他导入，具体取决于您如何定义它们。

小开 
import React, { Component } from 'react'

这招对我很管用。不过，我不确定为什么它修复了我对这个问题的看法。因此，如果您碰巧发现了这个问题，并且使用 create-response-app 作为开始样板，那么这种导入 React 的方法就可以解决这个问题。(截至10月18日，哈哈)

小开

对于那些使用 TypeScript 工作的 ReactJS。

import * as React from 'react';
小开

改变: 从“反应”导入{反应}从“反应”导入 到 从“反应”导入反应 因为 React 是默认导出，而且任何默认导出都不需要大括号。

小开

如果您需要从“ React”导入多个类，那么您可以为它们使用一个别名(React 除外)。比如,

import React, * as react from 'react';
小开

这个错误发生在我身上是由于粗心大意。实际上

import React from 'react';

括号用于指定的输出，例如:

import React, { useState, useEffect } from 'react';
小开

在该模块中默认导出 React，不需要{}。

小开

尝试使用析构函数导入 React 对象可能会导致类似于此 import {React} from 'react';的问题。 这可能是在90% 的情况下运行上面的代码时出现错误的原因。

宁可使用: import React from 'react';

然后你可以通过以下方式访问 React 类的任何成员: 做出反应。

小开

此错误可能由于粗心而发生。请添加

import React from 'react'

之后就能解决了

小开

这个问题发生在从 response 导入 React 时，我将它放在了花括号中。

请这样做:

import React, {useState} from "react";

而不是:

import {React, useState} from "react";

小开

我在单元测试时试图模拟一个组件，但是没有正确地设置它时得到了这个结果

我所做的导致了这个错误:

jest.mock("./SomeComponent", () => {
return <div>MockSomeComponent</div>
});

我需要做的是:

jest.mock("./SomeComponent", () => {
return () => <div>MockSomeComponent</div>
});

提交答案