React hoc Общая ошибка - может быть создан с другим подтипом ограничения 'InjectedProps'

Я сократил свой пример до минимума, чтобы понять проблему:

Пример кода - Hoc.tsx

import React, { FC, ComponentType } from 'react';
import { connect } from 'react-redux';

interface ReduxProps {
  param: string;
}

interface InjectedProps {
  str: string;
}

const withWrapper = <P extends InjectedProps>(Comp: ComponentType<P>) => {
  const Wrapper: FC<ReduxProps> = ({ param }) => {
    // do sometthing with param
    // inject property
    const str = 'hello';
    return <Comp str = {str} />;
  };
  Wrapper.displayName = 'Wrapper';

  // removed actual state to show example to test in typescript playground
  const mapStateToProps = () => ({
    param: 'some param'
  });

  const connector = connect(mapStateToProps);
  return connector(Wrapper);
};

export default withWrapper;

На игровой площадке машинописного текста я получаю эту ошибку:

Ошибка

Type '{ str: string; }' is not assignable to type 'P'. '{ str: string; }' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'InjectedProps'

Как вставить реквизит в мой компонент более высокого порядка и сохранить предоставленный общий?

reactjs typescript higher-order-components

30.03.2021 12:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это немного неуклюже, но решение найдено

import React, { FC, ComponentType } from 'react';
import { connect } from 'react-redux';

interface ReduxProps {
  param: string;
}

interface InjectedProps {
  str: string;
}

const withWrapper = <P extends {}>(Comp: ComponentType<P | InjectedProps>) => {
  const Wrapper: FC<ReduxProps> = ({ param }) => {
    // do sometthing with param
    // inject property
    const str = 'hello';
    return <Comp str = {str} />;
  };
  Wrapper.displayName = 'Wrapper';

  // removed actual state to show example to test in typescript playground
  const mapStateToProps = () => ({
    param: 'some param'
  });

  const connector = connect(mapStateToProps);
  return connector(Wrapper);
};

export default withWrapper;

interface Props {
  something: string;
}
const ConsumeWith: FC<Props | InjectedProps> = props => {
  const str = (props as InjectedProps).str;
  const something = (props as Props).something;

  return (
    <div>
      {str}{something}
    </div>
  );
};

const Final = withWrapper<Props>(ConsumeWith);

30.03.2021 13:42

Другие вопросы по теме

Сравните два массива и сделайте другой массив с разницей в javascript

Выполнение цикла for в "параллельном" режиме с использованием обещаний async / await

Невозможно создать отчет о покрытии кода для приложения Angular

Как аннотировать функциональный компонент React с помощью свойств и состояний?

Машинописец жалуется на тип любого параметра, хотя он не относится к типу

Angular typescript - как удалить пробел между словами в component.html

По заданному дискриминанту получить тип свойства для соответствующего члена дискриминируемого объединения

Элемент привязки children неявно имеет тип any

Есть ли тип Angular Components при создании интерфейса?

DashboardComponent.html: 2981 ОШИБКА RangeError: превышен максимальный размер стека вызовов Angular 8

React hoc Общая ошибка - может быть создан с другим подтипом ограничения 'InjectedProps'

Ответы 1

Другие вопросы по теме

Похожие вопросы