制作一个高阶组件以与 TypeScript 互操作 react-relay 和 react-router

Posted 2023-03-08

【中文标题】制作一个高阶组件以与 TypeScript 互操作 react-relay 和 react-router

【英文标题】：Making a Higher Order Component to inter-operate react-relay and react-router with TypeScript

【发布时间】：2016-09-03 09:38:16

【问题描述】：

好的，我的弗兰肯斯坦怪物已经失控了，我只剩下这么多头发要拔了，所以这里的任何帮助都非常感谢。

我正在尝试使用 React、React-Router、React-Relay 和 Typescript 进行非常基本的应用设置。实际上，我的所有功能都在运行，但它这样做的同时抛出了一些我想纠正的讨厌的 Typescript 错误。

因此，基本的 react-router + react-relay 设置模仿了此处的官方 react-relay 方法：https://medium.com/@cpojer/relay-and-routing-36b5439bad9

不幸的是，当将其翻译成 TypeScript 并通过类型化使用导入的类型定义进行反应中继时（而且，我非常不必修改导入的类型定义）； Route 定义了 props 和 TypeScript 对象以将 home 和 queries prop 传递给 Route 组件。

很抱歉将我的代码放在这里，但你需要它来充分理解这个问题。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import  Router, Route, browserHistory  from 'react-router';
import * as Relay from 'react-relay';
import MainApp from './components/MainApp';

const createRelayContainer: any = function createRelayContainer (Component: new() => React.Component<any, any>, props: any): JSX.Element 
  if (Relay.isContainer(Component)) 
    // construct the RelayQueryConfig from the route and the router props
    const  name, queries  = props.route;
    const  params  = props;

    return (
      <Relay.RootContainer
        Component=Component
        renderFetched=(data: any) : any => <Component ...props ...data /> 
        route=name, params, queries
       />
    );
  
  return <Component ...props />;
;

const homeQueries: any = 
  viewer: (): Relay.QLExpression => Relay.QL`
    query 
      viewer
    `,
;

ReactDOM.render(
  <Router
    history= browserHistory 
    createElement=createRelayContainer>
    <Route>
      <Route
        name='home'
        path='/'
        component=MainApp
        queries=homeQueries
      />
    </Route>
  </Router>,
  document.getElementById('root'));
;

正如我所说，这实际上按预期运行，但问题是 Route 的 react-router 接口没有 name 或 queries，因此 TypeScript 会引发错误。

我确信有几种不同的方法可以解决这个问题，但我不知道在这种情况下什么是最佳做法。

（一些基本版本信息可能会有所帮助：TypeScript 1.8.10、React 15、React-Router 2.4、React-Relay 0.8）

【参考方案1】：

好的，这里最简单的答案是通过命名空间合并添加到导入的 react-router 定义中（我不知道 Typescript 允许你这样做）。

有兴趣的可以加个overrides.d.ts（或者随便起个名字），然后添加到RouteProps界面：

declare namespace ReactRouter 
  interface RouteProps 
    name?: string;
    queries?: any;
  

老实说，可能有更聪明的方法来处理整个事情，但这是最简单的，而且很有效。

叹息，我的生命已经过去了好几个小时......