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:属性'url‘在'PropsWithChildren’类型上不存在。TS2339:属性'onClick‘在'PropsWithChildren’类型上不存在。

P.S.：我不希望两个道具都包含在界面中。我想要这个还是那个。

Answer 1

您可以这样键入OwnProps：

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