前端 - 为何 export default function index({ref }) { // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)？

Question

我定义了一个组件如下：
code-blockcontainer

import React, { useRef } from 'react'



export default function index({ref }) {  // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)

  const clickButton = () => {
    console.log('输出子组件的实例信息：',  ref.current)
  }
  
  return (
    <div>
      <button onClick={clickButton} >点击按钮</button>
    </div>
  )
}

使用的时候：

import React, { useRef } from 'react';

import './App.css';

import CodeBlockContainer from './component/code-blockcontainer'

function App() {

  const childRef = useRef<HTMLDivElement>(null)

  return (
    <div className="App">
      <CodeBlockContainer ref={childRef}></CodeBlockContainer>
    </div>
  );
}

export default App;

===

问题是：定义组件时候这一行有报错：

export default function index({ref }) {  // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)

请问这里应该如何进行处理呢？
我变为：

{ref: React.RefObject<HTMLDivElement>} 

也会报错。

Answer 1

需要使用使用 forwardRef
其次ref是第二个参数 不是第一个参数对象中

export const Example: FC = forwardRef((props, ref) => {
  return <div></div>
})

Answer 2

在你的 React 组件中，你遇到的 TypeScript 错误是由于 ref 属性的类型没有明确指定。在 TypeScript 中，当你从 props 中解构一个属性时，你需要显式地指定该属性的类型。对于 React 的 ref，它通常是一个 React.RefObject 或一个回调函数，但在你的组件 index 中，你希望它接受一个 React.RefObject。

为了解决这个问题，你需要在函数组件的参数中显式地定义 ref 的类型。但是，需要注意的是，在 React 函数组件中，通常不会直接将 ref 作为 prop 传递，因为函数组件没有实例（与类组件不同），因此无法直接挂载 ref。然而，如果你正在使用 forwardRef 或类似的模式来将 ref 转发到子组件或 DOM 元素，你可以在组件的 prop 类型中定义 ref。

但是，在你的例子中，看起来你可能是想在一个高阶组件或父组件中使用 ref 来访问子组件中的某个 DOM 元素或组件实例。由于你的组件 index 本身并不直接处理 DOM 元素，你可能需要调整你的组件设计或确保 ref 的使用方式是正确的。

不过，为了回答你的问题，这里是如何在 TypeScript 中正确声明 ref 属性的一个例子，尽管这可能不是你实际想要的使用方式：

import React, { RefObject, useRef } from 'react';

interface Props {
  ref?: RefObject<HTMLDivElement>; // 声明 ref 可能为 undefined，因为不是所有情况下都会传递
}

export default function Index({ ref }: Props) {
  const clickButton = () => {
    if (ref && ref.current) {
      console.log('输出子组件的实例信息（如果有的话）：', ref.current);
    } else {
      console.log('ref 未定义或未挂载到 DOM 元素');
    }
  };

  return (
    <div ref={ref}> {/* 注意：这里我们尝试将 ref 附加到 div 上，但这在函数组件中通常不是必需的 */}
      <button onClick={clickButton}>点击按钮</button>
    </div>
  );
}

// 注意：由于 Index 组件现在接受一个 ref prop，你需要确保在父组件中正确地传递它
// 但是，上面的 Index 组件示例可能并不符合你原始的设计意图

然而，如果你的意图是在父组件中使用 ref 来直接访问子组件的 DOM 元素或特定实例，并且你的子组件（在这个例子中是 Index）并不直接处理 ref，你可能需要重新考虑你的组件结构或使用 React.forwardRef 来转发 ref。

如果你的 Index 组件实际上不需要直接处理 ref，你可以简单地移除 ref 参数，并在父组件中直接使用 ref 附加到子组件的 DOM 容器上（如果你正在使用 React.forwardRef）。如果 Index 组件是一个类组件或者你需要通过某种方式访问它的实例或内部 DOM，你可能需要改用类组件或使用其他设计模式（如渲染回调、上下文等）。