javascript - 使用文字点符号 setter 将属性注入(inject) ReactJS 功能组件是一种好习惯吗？

Question

在摆弄别人写的 React 代码时，我偶然发现了这个模式:

// So far so good:
const displayName = 'aComponentsName'
const propTypes = {
  // not important
}

const aFunctionalComponent = () => 'someJSX, not important'

// That's what baffles me:
aFunctionalComponent.displayName = displayName
aFunctionalComponent.propTypes = propTypes

我知道从技术上讲，函数是对象，它们可以有属性，甚至方法:

const func = () => 'somevalue'

func.foo = 'foo'
func.bar = 'bar'
func.baz = () => 'hello world'

console.dir(func) // Sadly, can't be expanded in SO sandbox, but the props are there
console.log(func.foo, func.bar)
console.log(func.baz())

我的问题是:可以吗？你用吗？将一堆(相当静态的)类状态属性注入(inject)无状态组件是一种巧妙的方法，还是我应该避免的黑客攻击？

Answer 1

displayName 和 propTypes 是特定的属性，因此在示例中设置了它们。

displayName是包含函数名称的非标准化属性。与 name 不同，它可以手动设置并包含可读的名称，即使函数被缩小也是如此。它可用于调试(特别是通过 React devtools)或作为提供原始函数名称的常用方式，例如:

function callFn(fn) {
  console.log('Calling function: ',  fn.displayName || fn.name);
  return fn();
}

callFn(aFunctionalComponent);

propTypes 由 prop-types 使用在运行时进行类型检查。

将数据作为函数属性提供是好是坏取决于具体情况。