TypeScript错误将React router js函数重构为ts

Question

我正在尝试将此代码重构为打字稿。

js：

const RouteWithLayout = props => {
  const { layout: Layout, view: View, ...rest } = props;

  return (
    <Route
      {...rest}
      render={matchProps => (
        <Layout>
          <View {...matchProps} />
        </Layout>
      )}
    />
  );
};

ts：

interface RouteWithLayoutProps {
  view: React.FC | JSX.Element, // Don't know which one is the proper one to use.
  layout: React.FC,
}

const RouteWithLayout: React.FC<RouteWithLayoutProps> = ({ view: View, layout: Layout, ...rest }) => {

  return (
    <Route
      {...rest}
      render={matchProps => (
        <Layout>
          <View {...matchProps} />
        </Layout>
      )}
    />
  );
};

但是，当我像这样将其添加到路由文件中时>

<RouteWithLayout View={HomePage} Layout={HomePage} exact path='/'/>
我收到此错误

类型'{视图：FC ;布局：FC ；准确：正确；路径：字符串； }'不能分配给'IntrinsicAttributes＆RouteWithLayoutProps＆{children ?: ReactNode; }'。属性'View'在类型'IntrinsicAttributes＆RouteWithLayoutProps＆{children ?: ReactNode; }'。 TS2322

我正在尝试将此代码重构为打字稿。 js：const RouteWithLayout = props => {const {layout：Layout，view：View，... rest} = props;返回（

Answer 1

更改为此。 FC表示功能组件