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

我知道从技术上讲，函数是对象，并且thay可以具有属性，甚至是方法：

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())

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

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

由于函数属性取决于特定情况，因此提供数据是好事还是坏事。

使用文字点符号设置器将属性注入ReactJS功能组件中是一种好习惯吗？

1 个答案: