类型 ref 不可分配给类型 IntrinsicAttributes

Posted 2023-02-22

【中文标题】类型 ref 不可分配给类型 IntrinsicAttributes

【英文标题】：Type ref is not assignable to type IntrinsicAttributes

【发布时间】：2021-12-03 11:05:33

【问题描述】：

我想为我的元素使用 ref，但我收到一个错误，我不知道如何修复它。

Type ' ref: RefObject<unknown>; letter: string; draggable: number; ' is not assignable to type 'IntrinsicAttributes & content'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & content'. 

我在网上搜索了一段时间，但找不到任何对我的案子有帮助的东西。

这是我的代码：

Content.tsx
import React,  useRef, useState  from 'react';
import  Box  from './Box';

function Content() 
    const onSubmitAnswer = () => 
        console.log("da");
    ;

    const test = React.createRef();
    
    return (
        <div>
            <Box ... letter: 'C', draggable: 1  ref=test/>
            <Box ... letter: 'A', draggable: 0  />
            <Box ... letter: 'B', draggable: 0  />
            <Box ... letter: 'C', draggable: 0  />
            <Box ... letter: 'D', draggable: 0  />
            <button onClick=onSubmitAnswer>Trimite!</button>
        </div>
    );


export default Content;

和 Box.tsx

import React from 'react';
import './Box.css';
import Draggable,  DraggableData, DraggableEvent  from 'react-draggable';

export type content = 
    letter: string,
    draggable: number




export function Box(props: content) 
    const el = React.createRef();

    if(props.draggable) 
        return (
            <Draggable>
            <div className="box box-drag">
                <span className="box-content">
                  props.letter
                </span>
              </div>
            </Draggable>
            );
    
    return (
        <div className="box">
            <span className="box-content" ref=el => console.log(el?.getBoundingClientRect());>
              props.letter
            </span>
          </div>
        );

我想我知道为什么会发生这种情况 - Box 是一个组件，当我将 ref 作为属性传递时（就像我对 JSX 标记所做的那样），它的行为不一样（它在道具中）。

有什么方法可以在组件上使用 ref/className/name，就像我在 JSX 元素上使用它们一样？

//编辑： 打字稿游乐场链接：

https://www.typescriptlang.org/play?ssl=1&ssc=1&pln=1&pc=7#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzksgGbZFIDKMKMScAvnKVBCHAORSoacDcAKFCRYXAHQB6AEIQAHuLSFCA4eGjwAIlBQBzXSgBGAGyTY82vQZNJNdFNkv6jpgKIA3JADt4zVuy4edBgAWgATHWcbVUEYAE8wBjQIH294AF5cQTgcuFMYeigALjhCGChgL11MbNyIqxckEq98EEMkKEFGQUFSfC8MYBS4WTkACjA2MEIS5NSfAEos3LhgUgmpwnF6qNMlnFqVnJ4YfCgvODHDo5WAHidrUwA+a5uc27Dgdzg0YxRlAByKBASHSACJDPI4JC5OFImCXm8kXBboQwCgLr9-oQgSDwTCQnN6D4Ea9kSscJMINNxPlCt1yTdbpI0RjEYz3pJPu52eTmQ9GrzkQshCsGbkTmcLlckR8vj8-oDgaCIfJSRzUejMYqccr8fJCSliTB1RzcFSaXSOuK+SytUKmVyvg7ciKuj0+gMYEMLgBhI1pMb7a5zMpwFJUfCGEDAGAAQS8hAA7h04Jkg2mnss3qGIKZaRBdGMwWEUGC3WKhCGUmH6GHMshgoogvQyLcMXEnkHRblrpLzpcye9uS6maNcOJJ3grcUuL7ONgdo8mnAAIxMZg8UjpHB1mDMSSjo63cc4SfiadIAodEqcOMLuBLxolAAMG7gh6Hx9P58v19nnDSA+T42K+76fhqP5TnkV6FLe86LpEy5gYwB5HncUEXjB-63powFIc+cBvqhH7obktyGPgBTDCkvrGMAaAANY7hGUYxvGiYplAjBPAAKhU7FIAAhMylHUV4R7MiO1xut0ghIHIojwGESCkCg+DGPA-rzDA-BAA

【问题讨论】：

Ref 通常应该有一个类型 (Ref<T>)。在您的情况下，我怀疑它是 createRef<Box> 尽管我不记得它是否是自定义组件的正确类型。解决这个问题的最简单方法（尽管它不是一个漂亮的解决方案，因为你失去了智能感知），就是做createRef<any>。您可能想看看这个：***.com/questions/33796267/…。问题基本上是Ref<unknown>不能满足child的ref约束。

@briosheje 它不适用于 createRef，我收到相同的消息。

能否请您在 TypeSsript 游乐场的一个文件中分享最小可重现示例？

@captain-yossarian 我使用您请求的链接编辑了帖子，但我收到了很多我不知道如何修复的错误。

【参考方案1】：

如果你想使用ref，你应该把Box换成forwardRef：

import React,  useRef, useState  from 'react';
import './Box.css';
import Draggable,  DraggableData, DraggableEvent  from 'react-draggable';

type content = 
  letter: string,
  draggable: number


const Box = React.forwardRef<htmlDivElement, content>((props, ref) => 
  if (props.draggable) 
    return (
      <Draggable>
        <div className="box box-drag">
          <span className="box-content">
            props.letter
          </span>
        </div>
      </Draggable>
    );
  
  return (
    <div className="box">
      <span className="box-content">
        props.letter
      </span>
    </div>
  );
);



function Content() 
  const onSubmitAnswer = () => 
    console.log("da");
  ;

  const test = React.createRef<HTMLDivElement>();

  return (
    <div>
      <Box ... letter: 'C', draggable: 1  ref=test />
      <Box ... letter: 'A', draggable: 0  />
      <Box ... letter: 'B', draggable: 0  />
      <Box ... letter: 'C', draggable: 0  />
      <Box ... letter: 'D', draggable: 0  />
      <button onClick=onSubmitAnswer>Trimite!</button>
    </div>
  );


export default Content;

PLayground

ref 期望是 HTML 元素。这就是我为const test = React.createRef<HTMLDivElement>(); 提供HTMLDivElement 的原因。它应该是哪个 HTML 元素由您决定。

Box 使用显式泛型参数包装到 forwardRef 中：React.forwardRef<HTMLDivElement, content>