首页 文章

制作更高阶的组件以使用TypeScript互操作中继和反应路由器

提问于
浏览 次
1

好吧，我的弗兰肯斯坦怪物已经失去控制，我只留下那么多头发拉出来，所以任何帮助都归功于此 .

我正在尝试使用React，React-Router，React-Relay和Typescript进行非常基本的应用程序设置 . 我实际上已经将它全部运行了，但它正在这样做，同时抛出一些我想纠正的令人讨厌的Typescript错误 .

因此，基本的react-router反应中继设置模仿了这里发现的官方反应中继方法：https://medium.com/@cpojer/relay-and-routing-36b5439bad9

不幸的是，当将其转换为TypeScript并使用导入的类型定义通过typings进行react-relay时（并且，我根本不需要修改导入的类型定义）; Route 已定义props和TypeScript对象，以将 home 和 queries 道具传递给 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）

javascript reactjs typescript react-router relay

1 回答

  • 2

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

    对于那些感兴趣的人，只需添加一个 overrides.d.ts （或任何你想要命名的东西）并添加到 RouteProps 界面：

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

    老实说，可能有一个更聪明的方式来处理这整个事情，但这是最简单的，它的工作原理 .

    叹了口气，我的生活还有几个小时......

    回复于

相关问题