feat: AnchorButtonをnext/linkなどのラップされたコンポーネントに対応 #4901
Conversation
| // 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理 | ||
| type AnchorButtonType = <T extends ElementType = 'a'>( | ||
| props: Props<T> & ElementProps<T> & ElementRefProps<T>, | ||
| ) => ReturnType<FC> | ||
|
|
||
| const ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & { | ||
| displayName: string | ||
| } | ||
|
|
||
| ForwardedAnchorButton.displayName = 'AnchorButton' | ||
|
|
||
| export { ForwardedAnchorButton as AnchorButton } |
There was a problem hiding this comment.
正しく型推論が働くようにするTextLinkと同様に型を指定したかったのですが AnchorButtonの場合displayNameが必要だったため、AnchorButtonType にキャストし、さらに displayName を持つようにしています。
もっといい方法あったら指摘お願いします！ 🙇
There was a problem hiding this comment.
displayName って普通に React コンポーネントの型に勝手に含まれると思ったんですがそんなことないんですね。
この辺見てもサッパリですが。
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/81f33824fa7f8f0d37e1c899d2be5fbe73f92dce/types/react/index.d.ts#L639-L653
There was a problem hiding this comment.
NamedExoticComponentってのがあったんですね
export const AnchorButton: AnchorButtonType & NamedExoticComponent<Props<any>>
と定義すればいけそう
There was a problem hiding this comment.
今のままのがまだわかりやすいか...一旦このままにします！
masa0527
requested review from
oti and
AtsushiM
and removed request for
a team
commit: |
| const ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & { | ||
| displayName: string | ||
| } | ||
|
|
||
| // BottomFixedArea での判定に用いるために displayName を明示的に設定する |
There was a problem hiding this comment.
そもそもこれ本当にまだ必要なんだろうか…？
BottomFixedArea の実装見ても、primary/secondary 属性が Button と AnchorButton のどちらかをランタイムで判定するようなコードには見えないんですがわからない。
There was a problem hiding this comment.
There was a problem hiding this comment.
ほえー、displayName ってそういう使い方してもいいのか…。
関連URL
JIRA
概要
TextLinkと同様にnext/link react-routerなどのコンポーネントを使えるようにした。
#4867
変更内容
任意のカスタムコンポーネントを
elementAsプロパティを通じて指定できるようにした。確認方法
sandbox環境などで
AnchorButtonを定義して確認