Question

因此，我对React还是相当陌生的，尤其是对于Typescript。我正在竭尽全力把它包裹起来，让我如此裸露！

index.tsx
Router.tsx（所有不同的路线）
LandingFrame.tsx（页面布局）

import React from 'react';

import LandingMain from './LandingMain'

const LandingFrame = () => {
    return (
        <LandingMain/>
    );
}

export default LandingFrame;

LandingMain.tsx（主）

import React, { forwardRef } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const YES = gql`
  query yes {
    yes {
      id
      data
      data {
        data
        data
      }
    }
  }
`;

const LandingMain = ({ history }: RouteComponentProps<{}>) => {
  const { loading, error, data } = useQuery(YES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>landing-page.js</h1>
      {data.yes 
        ? <p>Welcome back, {data.yes.data}</p> 
        : <p>Welcome back, Anon</p>
      }
    </div>

  );
};

export default LandingMain;

（第二点）我希望通过分割登录页面，首先在主要组件中的graphql查询之后加载框架。这样一来，页面加载时，不仅不会在加载其余页面之前在空白页面上返回<p>Loading...</p>。

TypeScript error in LandingFrame.tsx(22,14):
Type '{}' is missing the following properties from type 'RouteComponentProps<{}, StaticContext, PoorMansUnknown>': history, location, match  TS2739

在这一点上，我只是在尝试尽可能多地分解代码。但是在这样做的时候，我注意到TS不允许我像React那样容易地导入组件。从我读过的书中，我需要以某种方式传递道具？

Answer 1

return (
    <LandingMain/>
);

LandingMain希望接收routeComponentProps，但是您在渲染时没有所述props。您需要添加组件期望的道具。

据我了解，着陆架也正在接收RouteComponentProps，因此这应该可行

const LandingFrame = (props: RouteComponentProps<{}>) => {
    return (
        <LandingMain {...props} />
    );
}

类型“ {}”缺少类型“ RouteComponentProps <{} ,,>”的以下属性

1 个答案: