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>

Comparez les API de forwarding et le comportement de TypeScript de Button, DropdownItem et BreadcrumbItem, en utilisant comme référence les définitions de types de styled-components liées dans l’issue. Le travail est terminé lorsque ces composants exposent une méthode cohérente et type-safe pour transmettre un composant personnalisé et ses props.