Javascript 将React TS接口转换为React JS

我正在尝试使用集成到应用程序中。我对typescript不太熟悉，我看到它在一个UTIL中使用了

接口

（javascript没有）。我读过，但我不确定这是否与typescript使用的相同

---

以下是我试图转换的TS代码：

import * as React from 'react'
import { Route, Redirect, RouteComponentProps } from 'react-router-dom'
import type { RouteProps } from 'react-router-dom'

import { useKeycloak } from '@react-keycloak/web'

interface PrivateRouteParams extends RouteProps {
  component:
    | React.ComponentType<RouteComponentProps<any>>
    | React.ComponentType<any>
}

export function PrivateRoute({
  component: Component,
  ...rest
}: PrivateRouteParams) {
  const { keycloak } = useKeycloak()

  return (
    <Route
      {...rest}
      render={(props) =>
        keycloak?.authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
            }}
          />
        )
      }
    />
  )
}

import*作为来自“React”的React
从“react router dom”导入{Route，Redirect，RouteComponentProps}
从“react router dom”导入类型{RouteProps}
从“@react keydepeat/web”导入{usekeydepeat}
接口PrivateRouteParams扩展RouteProps{
组成部分：
|React.ComponentType
|React.ComponentType
}
导出函数PrivateRoute({
组件：组件，
休息
}：PrivateRouteParams）{
const{keydape}=usekeydape（）
返回(
钥匙斗篷？，认证(
) : (
)
}
/>
)
}

---

以下是有人对JS的建议：

import * as React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useKeycloak } from '@react-keycloak/web';

export function PrivateRoute({ component, ...rest }) {
  const { keycloak } = useKeycloak();

  return (
    <Route
      {...rest}
      render={(props) =>
        keycloak?.authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/auth',
              state: { from: props.location },
            }}
          />
        )
      }
    />
  );
}

import*as React from'React'；
从“react router dom”导入{Route，Redirect}；
从'@react-keydape/web'导入{usekeydape}；
导出函数privaterout（{component，…rest}）{
const{keydove}=usekeydove（）；
返回(
钥匙斗篷？，认证(
) : (
)
}
/>
);
}

---

不过，我认为

在react.js中不起作用

---

编辑：添加代码

React路由器使用带有小写字母的prop

组件

。为了使用JSX调用自定义组件，它必须具有大写名称。见

Typescript示例代码在解构prop

组件时将其重命名为
组件
。这允许他们使用JSX调用

将代码转换为Javascript时，意外删除了此重命名。您可能将其误认为是类型注释

此代码应适用于：

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

import { useKeycloak } from '@react-keycloak/web'

export function PrivateRoute({
  component: Component,
  ...rest
}) {
  const { keycloak } = useKeycloak()

  return (
    <Route
      {...rest}
      render={(props) =>
        keycloak?.authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
            }}
          />
        )
      }
    />
  )
}

import*作为来自“React”的React
从“react router dom”导入{Route，Redirect}
从“@react keydepeat/web”导入{usekeydepeat}
导出函数PrivateRoute({
组件：组件，
休息
}) {
const{keydape}=usekeydape（）
返回(
钥匙斗篷？，认证(
) : (
)
}
/>
)
}
如果我理解正确，您正在编写javascript，想知道如何使用该软件包吗？您应该只需要运行
npm安装--save@react keybeave/web
。用typescript编写的代码可以传输到javascript，因此应该可以无缝工作。如果您仍然需要帮助，请提供您尝试过的代码。指向代码的链接不会切断它，因为它们可能会过时。