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

Question

Я преобразовываю реактивный проект из redux в mobx, и у меня возникла следующая проблема: я использовал шаблон «контейнер / презентатор» с redux, что означало использование функции «connect» избыточного типа, например:

 export default connect(mapStateToProps, mapDispatchToProps)(Leads);

Проблема в том, что у меня нет эквивалентной функции mobx, поэтому я попытался просто создать экземпляр компонента в контейнере.Что-то вроде:

render() {
  return (
    <MyComponent
      store={mystore}
    />
  );
}

К сожалению, это не работает, потому что MyComponent внедрил свойства из реагирующего маршрутизатора, что-то вроде этого:

class MyComponent extends React.Component<ReportProps & RouteComponentProps<ReportProps>> {

  constructor(public routeProps: ReportProps & RouteComponentProps<ReportProps>) {
    super(routeProps);
  }...

Я попытался избавиться от контейнераконцепции, но та же проблема возникает в других местах, потому что я использую декоратор mobx-реагировать @inject.Например, у меня есть такой компонент:

export interface AddressProps {
  report: IReportStore;
}

@inject((rootStore: RootStore) => ({
  report: rootStore.report
}))
@observer
class Address extends React.Component<AddressProps> {
...

Если я тогда попытаюсь использовать свой компонент где-нибудь, машинопись жалуется, что я не передаю обязательное свойство (отчет, в данном случае), даже еслиМне не нужно, так как я вводю свойства.

Полагаю, мне не хватает чего-то простого, так как это довольно простое использование mobx.А может это просто проблема с машинописью ...?Если да, есть идеи, как это исправить или обойти это?

Заранее спасибо, Джонатан

Answer 1

Существует много проблем с методом Mobx Inject.

Первоначальная идея состояла в том, чтобы вернуть Partial<TProps>, но вы не можете сделать это набрано, не потеряв свой оригинальный класс: React.Component<Partial<TProps>,TState>! = YourComponent - установленные свойства.

Прочитайте обсуждаемую проблему здесь: https://github.com/mobxjs/mobx-react/issues/256

Упрощенное решение

Используйте необязательные параметры в props и установите их в свойстве getter:

interface AppProps {
    store?: SDtore;
}

class App {
  get store(): TimeEntryStore {
    return this.props.store as Store;
  }
  method(){
     this.store;///
  }
}

Другое решение

Если вы хотите сохранить необходимые параметры (например, для использования компонента за пределами mobx и т. Д.).

Вы можете рассмотреть приведение компонента к React.Component<TPropsReduced,State>, где TPropsReduced является самоопределенным интерфейсом с необходимыми реквизитами после введения.

Недостатки:

• Потеря безопасности типов при приведении (например, если вы допустили ошибки / опечатки в свойствах интерфейса. (Может быть решена путем расширения / создания подклассов интерфейсов.
• Потеря вызовов методов. У вас больше не будет типизированных методов для компонента (например, когда вы используете ref={()=>}), но использование этого в любом случае не рекомендуется.

Пример:

interface AddressPropsMobx {
}

interface AddressProps extends AddressPropsMobx {
  report: IReportStore;
}



//Pure react component
class Address extends React.Component<AddressProps> {}

// Mobx version:
const MobxAddress = inject((rootStore: RootStore) => ({
  report: rootStore.report
}))(observer(Address)) as React.Component<AddressPropsMobx>;  //unsafe cast