Resolve inconsistencies when forwarding components

Describe the issue. What is the expected and unexpected behavior?

Sometimes as a user you want to be able to pass in your custom component to render instead of the default element. However the API around this varies wildly per component. For example, these are some components we use in our application that need React Router's Link component:

Button

{/* @ts-ignore */}
<Button component={Link} to={toNewClientScope({ realm })}>
  {t("createClientScope")}
</Button>

DropdownItem

<DropdownItem
  component={<Link to={toDashboard({ realm })}>{t("realmInfo")}</Link>}
/>

BreadcrumbItem

<BreadcrumbItem
  render={(props) => (
    <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
      {t("keys")}
    </Link>
  )}
/>

As you can see there are already three different ways of forwarding a component to render, and some of them are not able to be written in a type-safe manner.

The expected behavior here would be that this is a single and consistent API that is completely type-safe. For example, Styled Components has a as prop which is made type-safe by the definitions and allows the props to be forwarded and type-checked as well:

import styled from 'styled-components'

const Button = styled.button`
  background-color: hotpink;
`

<Button component={Link} to={toNewClientScope({ realm })}>
  {t("createClientScope")}
</Button>

参考 issue 中链接的 styled-components 类型定义，比较 Button、DropdownItem 和 BreadcrumbItem 的 forwarding API 以及 TypeScript 行为。当这些组件能够以一种一致且 type-safe 的方式转发自定义组件及其 props 时，这项工作即完成。