如何使用注入的属性实例化反应组件

Question

我正在将一个反应项目从 redux 转换为 mobx，我遇到了以下问题：我在 redux 中使用容器/演示器模式，这意味着使用 redux "connect" 函数，如下所示：

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

我遇到的问题是没有等效的 mobx 函数，因此，我尝试简单地在容器中创建组件的实例。像这样：

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

不幸的是，这不起作用，因为MyComponent已经从react-router注入了属性，如下所示：

class MyComponent extends React.Component<ReportProps & RouteComponentProps<ReportProps>> {
constructor(public routeProps: ReportProps & RouteComponentProps<ReportProps>) {
super(routeProps);
}...

我尝试摆脱容器概念，但在其他地方也出现了同样的问题，因为我使用的是 mobx-react @inject装饰器。例如，我有一个这样的组件：

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

如果我随后尝试在某个地方使用我的组件，打字稿会抱怨我没有传递所需的属性(在本例中为 report(，即使我不需要，因为我正在注入属性。

我想我一定缺少一些基本的东西，因为这是对 mobx 的相当直接的使用。或者也许这只是一个打字稿问题...？如果是这样，有什么想法可以修复或解决它吗？

提前感谢， 乔纳森

Answer 1

mobx 注入方法存在很多问题。

最初的想法是返回一个Partial<TProps>但你不能在不丢失原始 Class：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>其中 TPropsReduce 是一个自定义接口，注入后具有所需的 props。

缺点是：

• 在转换时失去类型安全性(例如，如果您在接口属性中犯了错误/拼写错误。(可以通过扩展/子类化接口来解决。
• 丢失方法调用。您将不再在组件上使用类型化方法(例如：当您使用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