向未命名的匿名默认导出函数添加 proptypes - e.i "export default () =>{}"答案

【问题标题】：Adding proptypes to unnamed anonymous default exported functions - e.i "export default () =>{}"向未命名的匿名默认导出函数添加 proptypes - e.i "export default () =>{}"
【发布时间】：2018-12-18 16:46:07
【问题描述】：

我知道你可以做到以下几点：

import React from "react";
import PropTypes from "prop-types";

const Header = ({ name }) => <div>hi {name}</div>;

Header.propTypes = {
  name: PropTypes.string
};

export default Header

但是，我可以为 propTypes 分配匿名导出的默认函数 (export default () =>{})，如下所示？：

 export default ({ name }) => <div>hi {name}</div>;


 //how do I do this part/ is it possible?
   ?.propTypes = {
      name: PropTypes.string
   };

编辑：我试过了：

    export default ({ name }) => (<div>
//  ----- here ------- (makes sense why, it doesn't work) 
    static propTypes = {
      name: PropTypes.string
    }
// ---------------
     {name}
    </div>);

和：

// -------and like this at bottom --------
    default.propTypes = {
      name: PropTypes.string
    }
// ------------------

我认为不可能，以这种方式导出，只是整体接近的一种尝试。

【问题讨论】：

我的意思是...static 仅用于定义类的静态属性，default 不是变量。
简单问题：为什么？制作这样的匿名组件对您、您的代码库，尤其是未来的开发人员/维护人员（包括一个月后的您自己）没有任何价值。保持代码易于阅读，命名您的 UI 组件，然后让打包程序和压缩程序在需要时进行疯狂的优化。

标签： javascript reactjs ecmascript-6 react-proptypes

【解决方案1】：

执行此操作的明智方法是将函数分配给变量：

const anon = ({ name }) => <div>hi {name}</div>;
anon.propTypes = {
  name: PropTypes.string
};

export default anon;

如果你真的相信你有理由不以理智的方式去做，Object.assign 怎么样？

export default Object.assign(
  ({ name }) => <div>hi {name}</div>,
  { propTypes: { name: PropTypes.string } }
);

【讨论】：

Object.assign！这很聪明。

【解决方案2】：

了解如何，我可以执行以下操作：

require('./Header').default.propTypes = {
  name: PropTypes.string
};

Header 是导出的文件。

这种方法有什么缺点（这是将同一个文件加载回内存吗？）？在野外从未见过这种模式？这可能是有充分理由的，因为我正在重新导入它。

【讨论】：

不过，这是一个糟糕的想法：这使得 another 模块负责 this 模块的 propTypes。这甚至没有意义。（这基本上是旧原型污染反模式的变体）
是的，缺点是您必须在需要它的每个文件中都写入，对吧？这有什么意义？
不，这不是 nodejs 的工作方式。 require 使用缓存对象，因此如果您在两个模块中需要对象 A，并且您在第一个模块中对其进行了修改，那么第二个模块也将获得该修改后的副本。它基本上使您的代码对人类读者来说具有神奇的不确定性。
哦，当然，我想你可以有一个文件，你可以在其中添加所有 propTypes，假设它首先被加载。如果你问我还是很疯狂（首先是，如果它在运行时动态地需要）