reactjs - 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：我不希望两个道具都包含在界面中。我想要这个或那个。

标签： reactjstypescript

Answer 1

你可以OwnProps这样输入：

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