没有为 ES6 函数设置默认属性作为默认值

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 的导出不可用，即使它们在运行时可用。

因此，如果您尝试在 class 的方法中的某处使用您的 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)

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

你可以试试下面的Webpack插件来找到我们的循环依赖：

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

PS：如果你还没有弹出你的create-react项目，git checkout -b到另一个分支，弹出并添加插件，找到循环依赖。

没有为 ES6 函数设置默认属性作为默认值

Default props not set for ES6 function as default value

reactjs

react-proptypes