Как передать компонент в качестве реквизита, чтобы переданный компонент не инициализировался при каждом рендеринге? ⇐ Javascript

[Anonymous]

Я пытаюсь использовать компонент устаревшего класса (не могу его изменить), который выглядит следующим образом:

Код: Выделить всё

class LegacyComponent {
render() {
const {
customComponent: CustomComponent,
} = this.props;

return (

{CustomComponent ? (

...

Внутри моего функционального компонента я хочу передать компонент с реквизитами в этот устаревший компонент, скажем

Код: Выделить всё

Когда я пытаюсь сделать это вот так:

Код: Выделить всё

он ​​не будет работать и выдаст ошибку. Недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получен: объект.< /code>.
С другой стороны, когда я буду использовать такую ​​функцию:

Код: Выделить всё

 }/>

Технически это бы работало, но компонент будет отображаться с нуля (переинициализироваться) каждый раз, когда мой родительский компонент выполняет повторную визуализацию.
Я думал об использовании memo или useCallback, но всякий раз, когда зависимости изменяются, компонент также повторно инициализируется с нуля, так что это не работает.
Как я могу сделать LegacyComponent естественным образом повторно отображаемым с измененными реквизитами вместо повторной инициализации/ оказанный каждый раз, когда родительский компонент перерисовывается?

Подробнее здесь: https://stackoverflow.com/questions/793 ... initialize