我正在努力使用一个非常简单的组件来显示跨度或<br>取决于道具：
import * as React from 'react';
type Props = {value: string}
function LetterRenderer({value = ''}: Props, ref: React.Ref<HTMLElement>) {
switch(value) {
case '\n': return (<br ref={ref} />);
default: return (<span ref={ref}>{value}</span>);
}
}
const Letter = React.forwardRef<HTMLElement, Props>(LetterRenderer);
Letter.displayName = 'Letter';
export default Letter;
在上<br ref={ref} />，第二个ref用以下错误消息加下划线：
Type 'Ref<HTMLElement>' is not assignable to type 'string | ((instance: HTMLBRElement | null) => void) | RefObject<HTMLBRElement> | null | undefined'.
Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLBRElement | null) => void) | RefObject<HTMLBRElement> | null | undefined'.
Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLBRElement>'.
Property 'clear' is missing in type 'HTMLElement' but required in type 'HTMLBRElement'.ts(2322)
lib.dom.d.ts(6336, 5): 'clear' is declared here.
index.d.ts(106, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>'
我应该如何解决？
function LetterRenderer({value = ''}: Props, ref: React.Ref<HTMLElement>) {
// ...
您的ref道具可以接受，HTMLElement但您真正想要的是HTMLBRElement | HTMLSpanElement因为分别ref传递给<br>和<span>的ref属性是React.Ref<HTMLBRElement>和React.Ref<HTMLSpanElement>。
将ref属性更改为
ref: React.Ref<HTMLBRElement | HTMLSpanElement>
需要注意的是HTMLBRElement与HTMLSpanElement双方继承HTMLElement而不是周围的其他方式; HTMLElement没有clear属性，但是HTMLBRElement有。
因为<br>的和<span>的ref属性只接受React.Ref<HTMLBRElement>并React.Ref<HTMLSpanElement>分别ref需要被内联相应铸造。
<br ref={ref as React.Ref<HTMLBRElement>} />
<span ref={ref as React.Ref<HTMLSpanElement>}>{text}</span>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句