本文介绍了如何在单独的SELECT组件中键入ForwardRef?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的技术是Reaction、TypeScrip和Style-Components。我正在尝试创建选择组件,以便在Reaction Hook表单中使用它。起初,看起来一切都是正确的,但我从打字脚本中得到了一个错误:
以下是我的代码:
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
在这种情况下不是道具的一部分。您应该为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;
这篇关于如何在单独的SELECT组件中键入ForwardRef?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!