Как затипизировать React.memo, если у функционального компонента есть статические свойства?

Question

[HealSpirit]

Всем привет. Имеется функциональный компонент (React) с 2 статическими полями (строка и объект). Хочу их использовать в разных местах. Столкнулся с проблемой по типизации React.memo. Если обращаться к этим поля в самом компоненте (App.tsx), то все работает. Но в index.tsx при обращение к этим полям при экспорте без memo работает, а при экспорте с memo не работает. Как затипизировать memo в этом случае?

App.tsx

import { FC, memo } from "react";

interface IAppProps {
  title: string;
}

interface IStatic<T> {
  someStaticString: string;
  someStaticObj: T;
}

const someObj = {
  SOME_KEY: "SOME_VALUE"
};

const App: FC<IAppProps> & IStatic<typeof someObj> = (props) => {
  const { title } = props;

  return <>{title}</>;
};

App.someStaticString = "someStaticString";
App.someStaticObj = someObj;

console.log(App.someStaticObj); // В App.tsx это обращение работает

export default memo(App); // не сработает обращение к статике в index.tsx
// export default App; // без memo работает и в index.tsx и App.tsx

index.tsx

import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App title={"some title"} />, rootElement);

console.log(App.someStaticObj); // При exporte с memo не работает, без memo - работает

https://codesandbox.io/s/modest-hooks-pksku

Answer 1

[Дмитрий Беляев]

Насколько знаю (я не эксперт реакта, могу ошибаться), memo и не пробросит статик свойства. Он по сути создает новый HOC вокруг вашего компонента. И статические свойства нужно вешать уже на эту обертку:

import { FC, memo } from "react";

interface IAppProps {
  title: string;
}

interface IStatic<T> {
  someStaticString: string;
  someStaticObj: T;
}

const someObj = {
  SOME_KEY: "SOME_VALUE"
};

const App: FC<IAppProps> & IStatic<typeof someObj> = memo((props) => {
  const { title } = props;

  return <>{title}</>;
});

App.someStaticString = "someStaticString";
App.someStaticObj = someObj;

export default App;

Comments

[Kirill Makarov]

Ты путаешь useMemo и memo