Является ли хорошей практикой вводить свойства в функциональные компоненты 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выполнять проверки типов во время выполнения.

Хорошая или плохая практика предоставления данных, поскольку свойства функции зависят от конкретного случая.