kripod / kripod/react-polymorphic-types
Passing a generic component to `as` fails
まだ誰も着手していません。
- 主要言語
- 言語のデータがありません
- スター
- 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!
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
issue 内の inline Button とジェネリックな Test の再現コードから始め、失敗する JSX の例の型チェックを行います。Button が使用するポリモーフィックな prop 型を追跡し、ジェネリックコンポーネントを渡したときに、その test prop と children が報告された TypeScript エラーなしで受け入れられることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100