如何将自定义React TypeScript元素转为可调用focus的HTMLElement？

你遇到的问题很典型：当你给自定义React组件加ref时，拿到的是组件实例（类组件场景）或者undefined（函数组件默认情况），而不是底层的DOM元素——focus()是DOM元素的专属方法，所以自然会报“Post不存在focus属性”的错误。下面分两种组件类型给你具体解决方案：

情况1：Post是类组件 #

方案A：在Post组件内部暴露focus方法 #

你可以在Post组件里定义一个对外的focus方法，让它去调用内部需要聚焦的DOM元素的focus()，这样父组件拿到组件实例后就能直接调用这个方法。

先修改Post组件：

class Post extends React.Component<{ post: Post }, {}> {
  // 存储内部可聚焦DOM元素的ref
  private contentRef = React.createRef<HTMLDivElement>();

  // 暴露给父组件的focus方法
  focus() {
    // 用可选链避免ref未挂载时报错
    this.contentRef.current?.focus();
  }

  render() {
    // 给div加tabIndex让它变成可聚焦元素（原生输入框/按钮不需要）
    return (
      <div ref={this.contentRef} tabIndex={0}>
        <h3>{this.props.post.title}</h3>
        <p>{this.props.post.content}</p>
      </div>
    );
  }
}

然后你的Feed组件就能正常调用了：

class Feed extends React.Component<{ posts: Post[] },{}> { 
  private postRefs: Map<number, Post> = new Map<number, Post>(); 

  render() { 
    return (
      <div> 
        {this.props.posts.map( ((post: Post), (index: number)) => 
          <Post 
            ref={(element: Post) => this.postRefs.set(index, element)} 
            post={post} 
          />
        )} 
      </div>
    )
  } 

  focusTargetElement() { 
    // 现在可以正常调用组件暴露的focus方法
    this.postRefs.get(5)?.focus();
  } 
}

方案B：用forwardRef转发DOM元素的ref #

如果不想在Post组件里额外写方法，也可以用React.forwardRef把内部DOM元素的ref直接传递给父组件，这样父组件拿到的就是原生DOM元素的ref，能直接调用focus()。

修改Post组件：

// 用forwardRef包裹，将外部传入的ref绑定到内部div上
const Post = React.forwardRef<HTMLDivElement, { post: Post }>((props, ref) => {
  return (
    <div ref={ref} tabIndex={0}>
      <h3>{props.post.title}</h3>
      <p>{props.post.content}</p>
    </div>
  );
});

// 给forwardRef组件设置displayName，方便调试
Post.displayName = 'Post';

然后调整Feed组件的ref类型：

class Feed extends React.Component<{ posts: Post[] },{}> { 
  // 现在存储的是DOM元素的ref，类型为HTMLDivElement | null
  private postRefs: Map<number, HTMLDivElement | null> = new Map<number, HTMLDivElement | null>(); 

  render() { 
    return (
      <div> 
        {this.props.posts.map( ((post: Post), (index: number)) => 
          <Post 
            ref={(element) => this.postRefs.set(index, element)} 
            post={post} 
          />
        )} 
      </div>
    )
  } 

  focusTargetElement() { 
    this.postRefs.get(5)?.focus();
  } 
}

情况2：Post是函数组件 #

函数组件默认不支持接收ref，必须用React.forwardRef来转发内部DOM元素的ref，具体实现和上面的方案B完全一致——把Post改成forwardRef包裹的函数组件，父组件就能拿到原生DOM元素的ref并调用focus()了。

关键注意点 #

• 确保目标DOM元素可聚焦：比如<div>、<p>这类元素默认不可聚焦，需要添加tabIndex={0}（允许键盘Tab导航聚焦）或tabIndex=-1（仅允许JS主动聚焦）；原生输入框、按钮等可交互元素无需额外设置。
• 调用focus()时尽量用可选链?.，避免ref未挂载或不存在时抛出错误。

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