Question

我发现当默认值为ES6导入函数时，未设置默认属性：

import { noop } from '../helpers';
//...
static defaultProps = {
onCancel: noop
}
// or
MyComponent.defaultProps = {
onCancel: noop
}

/helpers.js

export const noop = () => {};

在组件中的某处

this.props.onCancel();

将抛出：Uncaught TypeError: _this.props.onCancel is not a function

放置console.log(this.props.onCancel);日志undefined

但是，如果我将noop的签名更改为export function noop () {};

然后它起作用。另外，如果我不导入此占位符函数，而是在组件文件中定义它，那么它也可以工作。

const noop = () => {};
//...
static defaultProps = {
onCancel: noop
}
// or
MyComponent.defaultProps = {
onCancel: noop
}

如果我将console.log(noop);放到输出中，也会收到ƒ noop() {}，因此该功能已导入文件中。

我的第一种方法有什么问题？

Answer 1

发生这种情况是因为您具有一定的循环依赖关系，因此在编译时，../helpers的导出不可用，即使它们在运行时也可用。

因此，如果您尝试在类的方法内的某处使用noop，它将正常工作：例如：

import { noop } from '../helpers';

class Button extends Component {
    static defaultProps = {
        onCancel: noop // not available here, as this is assigned at compilation time
    }

    handleButtonClick(event) {
        noop() // available here, as this is called at runtime
    }


}

您可以通过以下方法验证以上内容：

import * as helps from '../helpers';

console.log(helpers)

您会注意到助手对象指向未定义的属性

您可以尝试使用以下Webpack插件来找到我们的循环依赖项：

https://www.npmjs.com/package/circular-dependency-plugin

PS：如果尚未弹出创建反应项目git checkout -b到另一个分支，则弹出并添加插件，找到循环依赖项。

未将ES6功能的默认道具设置为默认值

1 个答案: