React.FC泛型之一

Question

我正在嘗試構建將根據道具返回路由器鏈接或提供按鈕的組件。 這是我的一段代碼：

import React from 'react';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

type OwnProps = { url: string } | { onClick: () => void };

const NavButton: React.FC<OwnProps> = ({ url, onClick, children }) => (
  <Button component={url ? Link : undefined} to={url} onClick={onClick}>
    {children}
  </Button>
);

export default NavButton;

但是，我收到一條錯誤消息：

TS2339：類型“PropsWithChildren”上不存在屬性“url”。

TS2339：類型“PropsWithChildren”上不存在屬性“onClick”。

PS：我不希望這兩個道具都包含在界面中。 我想要這個或那個。

Answer 1

您可以像這樣輸入OwnProps ：

{ url: string, onClick?: never } | { url?: never, onClick: () => void }