React中如何为接收ref属性的自定义HTML元素传递ref？

这个问题我之前也踩过坑——React的ref机制是专门为React组件实例设计的，而Web Component属于原生DOM自定义元素，直接用字符串形式的ref: 'something'不仅已经被React废弃，还会被React按照自身逻辑解析，根本不会传递到Web Component上，也无法获取到元素实例。下面分两种常见场景给出解决方案：

场景1：想获取Web Component的原生DOM实例 #

这是最常见的需求，想要操作Web Component的方法或属性。你需要抛弃字符串ref，改用React推荐的createRef/useRef或者回调ref：

类组件示例（用createRef） #

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref对象
    this.teiPtrRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载后，就能拿到Web Component实例
    const teiPtrElement = this.teiPtrRef.current;
    if (teiPtrElement) {
      // 调用Web Component的自定义方法或访问属性
      teiPtrElement.doSomething();
      console.log(teiPtrElement.someProperty);
    }
  }

  render() {
    // 将ref对象传递给自定义元素
    return React.createElement('tei-ptr', { ref: this.teiPtrRef }, null);
  }
}

函数组件示例（用useRef） #

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

function MyComponent() {
  const teiPtrRef = useRef(null);

  useEffect(() => {
    // 组件挂载后访问实例
    if (teiPtrRef.current) {
      teiPtrRef.current.doSomething();
    }
  }, []);

  return React.createElement('tei-ptr', { ref: teiPtrRef }, null);
}

回调ref方式（兼容更多React版本） #

如果你的项目还在使用较老的React版本，回调ref也是个可靠的选择：

React.createElement('tei-ptr', {
  ref: (element) => {
    // element就是Web Component的原生实例
    if (element) {
      console.log('Web Component实例:', element);
      element.setAttribute('some-attr', 'value');
    }
  }
}, null);

场景2：想给Web Component传递名为ref的自定义属性 #

如果你的Web Component本身定义了ref属性来接收业务值，React会把这个属性当成内部ref处理，不会传递到DOM上。这时候有两种解决办法：

1. 改用替代属性名：类似className对应原生class，你可以约定用data-ref作为替代，然后在Web Component内部读取this.getAttribute('data-ref')来获取值：

React.createElement('tei-ptr', { 'data-ref': 'something' }, null);

2. 手动设置属性：通过回调ref在元素挂载后，手动给Web Component设置ref属性：

React.createElement('tei-ptr', {
  ref: (element) => {
    if (element) {
      element.setAttribute('ref', 'something');
    }
  }
}, null);

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