Реагировать имя компонента с завода - PullRequest
Новая
       6

Реагировать имя компонента с завода

0 голосов
/ 08 апреля 2020

У меня есть два компонента: 

const CustomSelfDefinedComponent = () => <React.Fragment />;
const CustomSelfDefinedViaFactoryComponent = (() => () => <React.Fragment />)();

при мелком рендеринге, я получаю следующее: 

        <CustomSelfDefinedComponent />
        <Component />

Может кто-нибудь указать мне, почему во втором случае у меня нет CustomSelfDefinedViaFactoryComponent как имя компонента в снимке?

Я вижу причину в том, что он компилируется как: [BABEL PLAYGROUND] 

"use strict";

var CustomSelfDefinedComponent = function CustomSelfDefinedComponent() {
  return /*#__PURE__*/React.createElement(React.Fragment, null);
};

var CustomSelfDefinedViaFactoryComponent = function () {
  return function () {
    return /*#__PURE__*/React.createElement(React.Fragment, null);
  };
}();

Какие-нибудь решения?

1 Ответ

1 голос
/ 08 апреля 2020

Я полагаю, что React полагается на function.name для получения имени компонента по умолчанию, поэтому в первом случае 

const CustomSelfDefinedComponent = () => <React.Fragment />;
CustomSelfDefinedComponent.name -> "CustomSelfDefinedComponent"

при возврате второй анонимной функции и name = ""

Для решения этой фабрики функция может иметь явный аргумент displayName: 

const factory = (..., displayName) => {
  const NewComponent = () => { ... }
  NewComponent.displayName = displayName
  return NewComponent
}

не уверен, есть ли плагин babel, который может упростить его

...