使用文字点符号设置器将属性注入 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())

我的问题是：可以吗？你用它吗？将一堆（相当静态的）类似状态的属性注入到无状态组件中是一种巧妙的方法，还是我应该避免的一种黑客攻击？

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 用于在运行时进行类型检查。

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