reactjs - 'YYY' 类型中缺少 React 属性 XXX，但在 'ZZZ' 类型中是必需的

Question

import { Link } from "react-router-dom";
export interface AvatarSize {
  avatarSize: number;
}

export interface PageInterface extends AvatarSize {
  user: {
    permaLink: string;
  };
}

const data = {
  user: {
    permaLink:
      "https://images.unsplash.com/photo-1590698933947-a202b069a861?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGhhcHB5fGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
  },
  avatarSize: 50
};

const App = () => <Page user={data} />; // user is 

const Page = (props: PageInterface) => (
  <PageLayout user={props.user} avatarSize={props.avatarSize} />
);

const PageLayout = (props: PageInterface) => (
  <NavigationBar user={props.user} avatarSize={props.avatarSize} />
);

const NavigationBar = (props: PageInterface) => (
  <Link to={props.user.permaLink}>
    <Avatar avatarSize={props.avatarSize} />
  </Link>
);

const Avatar = (props: AvatarSize) => (
  <div>Avatar Size: {props.avatarSize}</div>
)

export default App;

我刚开始学习 React，上面的源代码抛出了一个错误，但我不知道如何解决这个问题。我认为这可能与打字稿界面没有反应有关。

Answer 1

实际上你已经定义了data非页面道具的接口。你可以做两件事来修复它，要么改变道具的类型，要么直接发送user到avatarSize道具中。

方法一：

const Page = (props: { user: PageInterface }) => (
  <PageLayout user={props.user.user} avatarSize={props.user.avatarSize} />
);

方法二：（推荐）

const App = () => <Page user={data.user} avatarSize={data.avatarSize} />;