kripod / kripod/react-polymorphic-types

Passing a generic component to `as` fails

オープン
#15 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
言語のデータがありません
スター
197
フォーク
9
PR マージ指標
30日以内にマージされた PR はありません

説明

I've got a polymorphic button component that looks like this:

```tsx
import type {PolymorphicPropsWithoutRef} from 'react-polymorphic-types';

const defaultElement = 'button';

type ButtonOwnProps = {
color?: string;
};

type ButtonProps =
PolymorphicPropsWithoutRef;

function Button({
as,
color,
...rest
}: ButtonProps) {
const Element: React.ElementType = as || defaultElement;
return ;
}
```

Simple cases work:

```tsx
// ✅ Works

Two
;
```

… but when I pass a component to the `as` prop that is itself generic, I get an error.

```tsx
function Test({test}: {test: Name}) {
return <>{test};
}

// ❌ Fails

One
;
```

```
Type '{ children: string; as: ({ test }: { test: Name; }) => Element; color: string; test: "two"; }' is not assignable to type 'IntrinsicAttributes & Omit<{ test: "one" | "two"; }, "as" | "color"> & ButtonOwnProps & { as?: (({ test }: { test: Name; }) => Element) | undefined; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & Omit<{ test: "one" | "two"; }, "as" | "color"> & ButtonOwnProps & { as?: (({ test }: { test: Name; }) => Element) | undefined; }'.ts(2322)
```

Can you provide some help for this use case @kripod? Thank you very much!

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

issue 内の inline Button とジェネリックな Test の再現コードから始め、失敗する JSX の例の型チェックを行います。Button が使用するポリモーフィックな prop 型を追跡し、ジェネリックコンポーネントを渡したときに、その test prop と children が報告された TypeScript エラーなしで受け入れられることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。