javascript - 继承在 react Mocha 测试中不起作用

Question

我使用下面的结构创建了一个 React 组件，它在完成 babel 后可以在浏览器上运行。但是布局规范在我的案例中失败了，因为 React 仅在 Base 组件中声明。为什么继承在规范中不起作用？

Base.js

import React from 'react';

export default class Base extends React.Component {

}

Layout.js

import 'Base' from './Base';

export default class Layout extends Base {
const sample = React.cloneElement(this.props.data, {ref: 't'});

}

测试用例

import Layout from 'component/Layout'
import React from 'react';

describe('Layout', () => {
}

错误信息:

ReferenceError: Can't find variable: React

Answer 1

在 Layout.js 中，您有以下行

const sample = React.cloneElement(this.props.data, {ref: 't'});

这里你引用了 React，但是 Layout.js 没有为 React 定义，类似于你没有在不同的闭包中访问标识符，因此它会抛出一个ReferenceError

如果你想使用这个引用，你需要首先通过再次包含 import 行将它教给 Layout.js

import React from 'react';

如果你不想有第二条导入线，你可以

1. 在 Base.js 中重新导出 React，这样一次导入就同时完成 import {foo, bar} from 'baz';
2. 看看您是否可以通过您可以看到的标识符来引用您想要的内容，例如通过 Object.getPrototypeOf(Base.prototype).constructor?

---

当您在 测试用例 中创建全局 React 时，mocha 中的 ReferenceError 可能会过早抛出，移动 import React import Layout 行上方的 行应该修复此问题