BREAKING CHANGE: Use React.forwardRef for all components
#499
Conversation
|
✔️ Deploy Preview for ingred-ui ready! 🔨 Explore the source changes: 9d7e71e 🔍 Inspect the deploy log: https://app.netlify.com/sites/ingred-ui/deploys/61662aedb4f7670007fe67c2 😎 Browse the preview: https://deploy-preview-499--ingred-ui.netlify.app |
| // FIXME: Imprement without type assertion | ||
| export default React.forwardRef(CreatableSelect) as <T>( | ||
| props: CreatableSelectProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }, | ||
| ) => ReturnType<typeof CreatableSelect>; |
There was a problem hiding this comment.
generics使うタイプのコンポーネントはこんな書き方にしている
ref: https://fettblog.eu/typescript-react-generic-forward-refs/
他で言うと<Select />, <DataTable />。
| </Flex> | ||
| ); | ||
| }; | ||
| const ErrorText = React.forwardRef<HTMLDivElement, ErrorTextProps>( |
There was a problem hiding this comment.
基本的にはこんな感じでforwardRef()でラップするだけ
| const ExportedComponent = NavigationRail as any; | ||
| ExportedComponent.Container = NavigationRailContainer; | ||
|
|
||
| NavigationRail.Container = NavigationRailContainer; | ||
| NavigationRail.Header = Header; | ||
| NavigationRail.Content = Content; | ||
| NavigationRail.Footer = Footer; | ||
| NavigationRail.Menu = Menu; | ||
| NavigationRail.ExpantionMenu = ExpantionMenu; | ||
| NavigationRail.ExpantionMenuItem = ExpantionMenuItem; | ||
| NavigationRail.Fixture = Fixture; | ||
| NavigationRail.MainContent = MainContent; | ||
| ExportedComponent.Container = NavigationRailContainer; | ||
| ExportedComponent.Header = Header; | ||
| ExportedComponent.Content = Content; | ||
| ExportedComponent.Footer = Footer; | ||
| ExportedComponent.Menu = Menu; | ||
| ExportedComponent.ExpantionMenu = ExpantionMenu; | ||
| ExportedComponent.ExpantionMenuItem = ExpantionMenuItem; | ||
| ExportedComponent.Fixture = Fixture; | ||
| ExportedComponent.MainContent = MainContent; | ||
|
|
||
| export default NavigationRail; | ||
| export default ExportedComponent as ExportedComponentType; |
There was a problem hiding this comment.
.hogehogeで提供するタイプのコンポーネントは新たに型作ってtype assertした
| | string | ||
| | null | ||
| | undefined; | ||
|
|
||
| export function useMergeRefs<T>(...refs: ReactRef<T>[]): ReactRef<T> { | ||
| export function useMergeRefs<T>(...refs: ReactRef<T>[]): React.Ref<T> { |
There was a problem hiding this comment.
ところどころ使っていて型が合わなかったので調整した
kohashi
changed the title
React.forwardRef for all componentsReact.forwardRef for all components
| as={children == null ? "span" : "label"} | ||
| disabled={disabled} | ||
| size={radioButtonSize} | ||
| size={size} | ||
| > | ||
| <input |
There was a problem hiding this comment.
<input ref={ref} type="radio" でなく、上位要素の <Wrapper> にrefを渡してる(渡す？取る、と言うべき？）。
これはMUIもそんな感じで、最上位に ref を渡している。
個別に深いものを渡したいケースで別途渡すケースもある。 ここの <Input ... ref={handleInputRef}> のように
https://github.com/mui-org/material-ui/blob/512896973499adbbda057e7f3685d1b23cc02de9/packages/mui-material/src/InputBase/InputBase.js#L503-L535
ok.
src/components/Select/Select.tsx
Outdated
| @@ -220,4 +221,7 @@ const Select = <T,>( | |||
| ); | |||
| }; | |||
|
|
|||
| export default Select; | |||
| // FIXME: Imprement without type assertion | |||
There was a problem hiding this comment.
Imprement ??? Implementのことかな? ( nitpick)
|
PR名の変更ありがとうございますmm(この辺のトンマナ?にまだ詳しくなくて...) |
close: #495
https://ja.reactjs.org/docs/forwarding-refs.html
よってこれは破壊的変更となる。