如何在单独的 select 组件中键入 forwardRef?
How to type forwardRef in separate select component?
我使用的技术是 react、typescript 和 styled-components。
我正在尝试创建 select 组件以便在 React Hook Form 中使用它。
起初,看起来一切都是正确的,但我从打字稿中收到一条错误消息:
No overload matches this call.
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<SelectHTMLAttributes, HTMLSelectElement>, "form" | ... 262 more ... | "onTransitionEndCapture"> & { ...; } & ISelectProps, "form" | ... 264 more ... | "options"> & Partial<...>, "form" | ... 264 more ... | "options"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type 'ForwardedRef' is not assignable to type 'RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((instance: HTMLSelectElement | null) => void) & RefObject<...>) | (((instance: HTMLSelectElement | null) => void) & ((instance: HTMLSelectElement | null) => void)) | null | undefined'.
Type 'MutableRefObject' is not assignable to type 'RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((instance: HTMLSelectElement | null) => void) & RefObject<...>) | (((instance: HTMLSelectElement | null) => void) & ((instance: HTMLSelectElement | null) => void)) | null | undefined'.
Type 'MutableRefObject' is not assignable to type '((instance: HTMLSelectElement | null) => void) & RefObject'.
Type 'MutableRefObject' is not assignable to type '(instance: HTMLSelectElement | null) => void'.
Type 'MutableRefObject' provides no match for the signature '(instance: HTMLSelectElement | null): void'.
这是我的代码:
import React, { forwardRef } from "react";
import styled from "styled-components";
import arrow from "../assets/svg/select_arrow.svg";
interface ISelectProps {
options?: { name: string; value: string | number }[];
name: string;
ref?:
| ((instance: HTMLSelectElement | null) => void)
| React.RefObject<HTMLSelectElement>
| null
| undefined;
}
const SelectContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
position: relative;
`;
const StyledSelect = styled.select<ISelectProps>`
width: 100%;
height: 30px;
padding: 0 10px;
background: ${({ theme }) => theme.colors.transparentButton};
color: white;
border: 1px solid white;
border-radius: ${({ theme }) => theme.borderRadius};
font-size: 14px;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
&:focus,
&:active {
outline: none;
}
`;
const StyledArrow = styled.img`
position: absolute;
right: 10px;
padding: inherit;
`;
const Select = forwardRef(({ options, name }: ISelectProps, ref) => {
return (
<>
<SelectContainer>
<StyledSelect name={name} ref={ref}>
{options?.map((op) => (
<option value={op.value}>{op.name}</option>
))}
</StyledSelect>
<StyledArrow src={arrow} />
</SelectContainer>
</>
);
});
export default Select;
codesandbox.io/s/eager-hertz-opbsi?file=/src/select.tsx
我做错了什么?
预先感谢所有有用的答案!
首先,在这种情况下,ref
不是 props 的一部分。
您应该为 forwardRef
提供两个通用参数,以帮助 TS 缩小类型。
什么是ref
?它只是HTML个元素
import React, { forwardRef } from "react";
import styled from "styled-components";
interface ISelectProps {
options?: { name: string; value: string | number }[];
name: string;
}
const SelectContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
position: relative;
`;
const StyledSelect = styled.select<ISelectProps>`
width: 100%;
height: 30px;
padding: 0 10px;
background: ${({ theme }) => theme.colors.transparentButton};
color: white;
border: 1px solid white;
border-radius: ${({ theme }) => theme.borderRadius};
font-size: 14px;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
&:focus,
&:active {
outline: none;
}
`;
const StyledArrow = styled.img`
position: absolute;
right: 10px;
padding: inherit;
`;
const Select = forwardRef<HTMLSelectElement, ISelectProps>(({ options, name }, ref) => {
return (
<>
<SelectContainer>
<StyledSelect name={name} ref={ref}>
{options?.map((op) => (
<option value={op.value}>{op.name}</option>
))}
</StyledSelect>
</SelectContainer>
</>
);
});
export default Select;
您从未键入 ref
对象,请查看 React TypeScript Cheatsheet - forwardRef
中的示例。
// T typing the ref
forwardRef<T, P = {}>(...)
// Full typing signature
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
// BAD - ref object untyped
const Select = forwardRef(({ options, name }: ISelectProps, ref) => {...}
// GOOD - ref object typed
const Select = forwardRef<HTMLSelectElement, ISelectProps>(
({ options, name }, ref) => {...}
);
https://codesandbox.io/s/hungry-architecture-7gsnp?file=/src/select.tsx:665-1038
我使用的技术是 react、typescript 和 styled-components。 我正在尝试创建 select 组件以便在 React Hook Form 中使用它。 起初,看起来一切都是正确的,但我从打字稿中收到一条错误消息:
No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<SelectHTMLAttributes, HTMLSelectElement>, "form" | ... 262 more ... | "onTransitionEndCapture"> & { ...; } & ISelectProps, "form" | ... 264 more ... | "options"> & Partial<...>, "form" | ... 264 more ... | "options"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type 'ForwardedRef' is not assignable to type 'RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((instance: HTMLSelectElement | null) => void) & RefObject<...>) | (((instance: HTMLSelectElement | null) => void) & ((instance: HTMLSelectElement | null) => void)) | null | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((instance: HTMLSelectElement | null) => void) & RefObject<...>) | (((instance: HTMLSelectElement | null) => void) & ((instance: HTMLSelectElement | null) => void)) | null | undefined'. Type 'MutableRefObject' is not assignable to type '((instance: HTMLSelectElement | null) => void) & RefObject'. Type 'MutableRefObject' is not assignable to type '(instance: HTMLSelectElement | null) => void'. Type 'MutableRefObject' provides no match for the signature '(instance: HTMLSelectElement | null): void'.
这是我的代码:
import React, { forwardRef } from "react";
import styled from "styled-components";
import arrow from "../assets/svg/select_arrow.svg";
interface ISelectProps {
options?: { name: string; value: string | number }[];
name: string;
ref?:
| ((instance: HTMLSelectElement | null) => void)
| React.RefObject<HTMLSelectElement>
| null
| undefined;
}
const SelectContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
position: relative;
`;
const StyledSelect = styled.select<ISelectProps>`
width: 100%;
height: 30px;
padding: 0 10px;
background: ${({ theme }) => theme.colors.transparentButton};
color: white;
border: 1px solid white;
border-radius: ${({ theme }) => theme.borderRadius};
font-size: 14px;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
&:focus,
&:active {
outline: none;
}
`;
const StyledArrow = styled.img`
position: absolute;
right: 10px;
padding: inherit;
`;
const Select = forwardRef(({ options, name }: ISelectProps, ref) => {
return (
<>
<SelectContainer>
<StyledSelect name={name} ref={ref}>
{options?.map((op) => (
<option value={op.value}>{op.name}</option>
))}
</StyledSelect>
<StyledArrow src={arrow} />
</SelectContainer>
</>
);
});
export default Select;
codesandbox.io/s/eager-hertz-opbsi?file=/src/select.tsx
我做错了什么? 预先感谢所有有用的答案!
首先,在这种情况下,ref
不是 props 的一部分。
您应该为 forwardRef
提供两个通用参数,以帮助 TS 缩小类型。
什么是ref
?它只是HTML个元素
import React, { forwardRef } from "react";
import styled from "styled-components";
interface ISelectProps {
options?: { name: string; value: string | number }[];
name: string;
}
const SelectContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
position: relative;
`;
const StyledSelect = styled.select<ISelectProps>`
width: 100%;
height: 30px;
padding: 0 10px;
background: ${({ theme }) => theme.colors.transparentButton};
color: white;
border: 1px solid white;
border-radius: ${({ theme }) => theme.borderRadius};
font-size: 14px;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
&:focus,
&:active {
outline: none;
}
`;
const StyledArrow = styled.img`
position: absolute;
right: 10px;
padding: inherit;
`;
const Select = forwardRef<HTMLSelectElement, ISelectProps>(({ options, name }, ref) => {
return (
<>
<SelectContainer>
<StyledSelect name={name} ref={ref}>
{options?.map((op) => (
<option value={op.value}>{op.name}</option>
))}
</StyledSelect>
</SelectContainer>
</>
);
});
export default Select;
您从未键入 ref
对象,请查看 React TypeScript Cheatsheet - forwardRef
中的示例。
// T typing the ref
forwardRef<T, P = {}>(...)
// Full typing signature
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
// BAD - ref object untyped
const Select = forwardRef(({ options, name }: ISelectProps, ref) => {...}
// GOOD - ref object typed
const Select = forwardRef<HTMLSelectElement, ISelectProps>(
({ options, name }, ref) => {...}
);
https://codesandbox.io/s/hungry-architecture-7gsnp?file=/src/select.tsx:665-1038