首页 文章

将const函数代码从JSX转换为TSX

提问于
浏览 次
4

我正在尝试转换在JSX中定义备用路由组件的方式等效的TypeScript TSX文件 . （1）

JSX语法是这样的：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

我试图将其转换为TypeScript，但在Visual Studio中， <Component 部分（见下文）带有下划线，TypeScript编译器告诉我

(TS) JSX element type 'Component' does not have any construct or call signatures.

我真的不明白lambda函数的 ({ component: Component, ...rest }) 语法 . 这是我在TypeScript中编写的 .

export function PrivateRoute(Component: React.Component, ...rest: any[]) {
    return (
        <Route {...rest} render={props => (
            localStorage.getItem('user')
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )} />
    );
};

有什么建议？

参考文献：

javascript reactjs typescript asp.net-core visual-studio-2017

1 回答

  • 0

    关于错误 - JSX / TSX <Component ... 将被转换为类似 React.createElement(Component... 的东西，所以 Component 类型应该是一个函数/类， not 一个实例 . 因此正确的输入将是 ComponentType .

    关于 { component: Component, ...rest } - 这是object destructuring with assignment to new variable . 传递的参数被解压缩到变量 Component 和 rest （参数的 component 属性变为 Component 变量，所有其余属性变为 rest 变量）

    总而言之，生成的输入可能如下所示：

    type RouteProps = { component: React.ComponentType };
export function PrivateRoute(
    { component: Component, ...rest }: RouteProps) {
    ...
};
    回复于

相关问题