如何为回调Ref获取的元素设置样式并解决类型报错？

问题核心 #

你遇到的两个关键问题：

• 回调Ref的参数类型正确定义
• DOM元素的style不能直接赋值对象，需遵循DOM API的操作方式

正确实现方案 #

1. 库代码的类型与样式修正

回调Ref的参数类型应为HTMLElement | null（React会在元素挂载时传入DOM元素，卸载时传入null），同时修改样式时要操作DOM元素的CSSStyleDeclaration接口，而非直接赋值对象：

// --- library
import type { RefCallback } from 'react';

export const registerTarget = (): RefCallback<HTMLElement> => {
  return (targetRef: HTMLElement | null) => {
    if (targetRef) {
      // 方式1：逐个设置样式属性（最安全）
      targetRef.style.color = 'red';
      targetRef.style.fontWeight = 'bold';

      // 方式2：用Object.assign批量合并样式
      Object.assign(targetRef.style, {
        fontSize: '18px',
        padding: '8px'
      });

      // 方式3：通过cssText直接设置样式字符串（适合批量覆盖）
      // targetRef.style.cssText = 'color: red; font-size: 18px;';
    }
  };
};

2. 组件端使用示例

组件端无需额外类型处理，直接使用返回的回调Ref即可：

// --- component
import { registerTarget } from './your-library';

const MyComponent = () => {
  const targetMe = registerTarget();

  return (
    <div ref={targetMe}>This is my element for the library to operate on</div>
  );
};

关键原因说明 #

• 类型定义：React的回调Ref类型是RefCallback<T>，其中T是目标DOM元素类型（这里用HTMLElement适配大部分元素，若需特定元素比如HTMLDivElement也可替换）。
• 样式修改：DOM元素的style属性是CSSStyleDeclaration对象，它不允许直接替换整个对象（TS会提示只读），但允许修改其内部的样式属性，或通过Object.assign、cssText来批量操作。

内容的提问来源于stack exchange，提问作者GreenAsJade