反应路由器+打字稿类型错误

Posted 2023-02-21

【中文标题】反应路由器+打字稿类型错误

【英文标题】：React-router + typescript type error

【发布时间】：2017-10-30 05:36:19

【问题描述】：

在使用 typescript 创建我的 react 应用时，我遇到了一个小问题，我目前还无法解决。

我的代码：

App.tsx

import  * as React from 'react';
import * as ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';
import  BrowserRouter, Route, Switch  from 'react-router-dom';
import * as promise from 'redux-promise';
import reducers from './reducers';
import TemplateNavTop from './components/layout/template-nav-top';
const TestComponent2 = () => 
  return <h1>TestComponent</h1>;


const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
<Provider store=createStoreWithMiddleware(reducers)>
    <BrowserRouter>
        <Switch>
            <Route path="/" exact component=TestComponent />
            <Route path="/checkout">
                <TemplateNavTop>
                    <TestComponent2 />
                </TemplateNavTop>
            </Route>
        </Switch>
    </BrowserRouter>
</Provider>
, document.getElementById('root')

模板导航顶部

import * as React from 'react';
import NavTop from './nav-top/nav-top';
export default class TemplateNavTop extends React.Component<any, > 
  render() 
    return (
        <div>
            asd
            this.props.children
            Footer
        </div>
    );
  

问题出现在 /checkout 路由中，它抱怨以下内容：

Type ' path: "/checkout"; children: Element; ' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly< children?: ReactNode; > & Rea...'.
  Type ' path: "/checkout"; children: Element; ' is not assignable to type 'Readonly<RouteProps>'.
    Types of property 'children' are incompatible.
      Type 'Element' is not assignable to type '(props: RouteComponentProps<any>) => ReactNode'.

我发现以下解决方法确实有效：

<Route path="/checkout" component=() => TemplateWithNavBar(<TestComponent2 />) />

但我宁愿以正确的方式做，这里有人可以帮助我吗？

编辑：我确实安装了@types

【问题讨论】：

我感觉这是 [react-router.d.ts 文件](((props: RouteComponentProps) => React.ReactNode | React.ReactNode)) 的一个小错误.children 被定义为 ((props: RouteComponentProps<any>) => React.ReactNode | React.ReactNode) 我严重怀疑应该是 ((props: RouteComponentProps<any>) => React.ReactNode) | React.ReactNode

【参考方案1】：

编辑和 TL;DR： 只需使用

升级您的类型声明

npm install --save-dev @types/react-router

说明

这是声明文件中的错误。问题是最初预期的孩子类型是

((props: RouteComponentProps<any>) => React.ReactNode | React.ReactNode)

这确实是一个返回 React.ReactNode | React.ReactNode 联合的函数，该联合可折叠成一个简单的 React.ReactNode。

真正应该是这样的

((props: RouteComponentProps<any>) => React.ReactNode) | React.ReactNode

我打开了a pull request for you here。

我应该提到你可能不想依赖这种行为。我可以在网上找到的几乎所有示例都使用children 的显式属性，同时使用react-router 传递函数。 Even the documentation itself says that it only takes a function（而不是元素或其他任何东西）。

【讨论】：

非常感谢您的帮助和建议！