我试图为输入指定一个ref，但编译器会出现类似textInputRef的错误。我不知道应该是什么类型。
private place: React.RefObject<HTMLInputElement> = React.createRef();
private description: React.RefObject<HTMLTextAreaElement> = React.createRef();<FormText textInputRef={this.place}>Name of place</FormText>
<FormText textInputRef={this.description} area>type FormTextProps = {
textInputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
};render() {
const { textInputRef } = this.props;
const InputElement = area ? 'textarea' : 'input';
return (
<label>
<InputElement
type="text"
ref={textInputRef}
/>
</label>
);
}“ref”错误：
Type 'RefObject<HTMLInputElement | HTMLTextAreaElement> | undefined' is not assignable to type '((string | RefObject<HTMLTextAreaElement> | ((instance: HTMLTextAreaElement | null) => void)) & (string | RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void))) | null | undefined'.
Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '((string | RefObject<HTMLTextAreaElement> | ((instance: HTMLTextAreaElement | null) => void)) & (string | RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void))) | null | undefined'.
Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '((instance: HTMLTextAreaElement | null) => void) & RefObject<HTMLInputElement>'.
Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '(instance: HTMLTextAreaElement | null) => void'.
Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' provides no match for the signature '(instance: HTMLTextAreaElement | null): void'.ts(2322)
1条答案
按热度按时间qojgxg4l1#
prop
textInputRef是开放的，可以接收RefObject<HTMLInputElement>或RefObject<HTMLTextAreaElement>，但实际的元素只能使用它的适当类型，而不是另一个。例如，你可能会传递一个
RefObject<HTMLInputElement>，但area可能同时是true，所以你会要求分配<textarea ref={ HTMLInputElementRef } />，这显然是不允许的。您需要指定要呈现的组件类型和要“同时”分配的引用类型，即它们应该是强相关的。
由于
textarea和input是完全不同的组件，它们具有不同的属性 （例如type="text"对textarea也无效），我建议有条件地渲染整个组件，而不是有条件地指定组件名称：请注意，我通常不建议使用
as关键字，但我会证明它在这里的使用是正确的，因为你可以肯定，例如，textarea的ref总是-根据定义-React.RefObject<HTMLTextAreaElement>。