Почему, когда компонент обернут внутри компонента высокого порядка, новый компонент не имеет статических методов исходного компонента?

Question

Я читал об этом в React doc , но я не понимаю, почему это происходит.

Кроме того, я был бы очень признателен, если бы вы описали практический пример, в которомможет прикрепить к компоненту статический метод, который теряется, когда он помещен в HOC.Документ React рассказывает о контейнерах Relay, но я никогда не использовал его, мне нужен более простой пример.

Answer 1

Вот более надежный пример.Причина, по которой статические значения недоступны при использовании компонента более высокого порядка (например, enhance в приведенном ниже примере), заключается в том, что компонент, скомпонованный или упакованный, обернут другим компонентом.Таким образом, в результирующем компоненте не передаются статические методы компонента (если явно не скопировано, например, enhanceAndHoist в приведенном ниже примере).

Однако часто желательно, чтобы это происходило для всех статических методов, которыеможет быть сделано с пакетом hoist-non-react-statics, как указано в документации, и фактически используется многими другими пакетами, которые предоставляют компоненты более высокого порядка.

Например, последняя строка в react-reduxconnect метод для поднятия статики: https://github.com/reduxjs/react-redux/blob/b6b47995acfb8c1ff5d04a31c14aa75f112a47ab/src/components/connectAdvanced.js#L432

// Line from react-redux
return hoistStatics(Connect, WrappedComponent)

const enhance = Wrapped => {
  return class Enhanced extends React.Component {
    render() {
      return <Wrapped injectedProp="foo" />;
    }
  };
};

const WrappedComponent = props => <div>{props.injectedProp}</div>;

// Define a static method
WrappedComponent.staticValue = "baz";

// Now apply a HOC
const EnhancedComponent = enhance(WrappedComponent);

console.log(`WrappedComponent.staticValue: ${WrappedComponent.staticValue}`); // "baz"
console.log(`EnhancedComponent.staticValue: ${EnhancedComponent.staticValue}`); // undefined

const enhanceAndHoist = Wrapped => {
  const result = class Enhanced extends React.Component {
    render() {
      return <Wrapped injectedProp="foo" />;
    }
  };

  // Manually "hoist" the static value.
  result.staticValue = Wrapped.staticValue;

  return result;
};

// Now apply a HOC
const EnhancedAndHoistedComponent = enhanceAndHoist(WrappedComponent);

console.log(`WrappedComponent.staticValue: ${WrappedComponent.staticValue}`); // "baz"
console.log(
  `EnhancedAndHoistedComponent.staticValue: ${
    EnhancedAndHoistedComponent.staticValue
  }`
); // "baz"

function App() {
  return <EnhancedComponent />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>