React中通过ref调用getElementByClassName报错该如何解决？

1 直接报错原因 #

你调用的DOM API拼写错误：正确的API名称是getElementsByClassName，为复数形式（Elements末尾带s），你代码中少写了末尾的s，因此会提示该方法不存在。
另外该方法返回的是符合条件的HTML元素集合，若你需要获取单个元素，可通过下标[0]取第一个匹配项。

2 潜在问题排查 #

如果修正拼写后依然报错，是因为你将ref挂载到了自定义React组件上，默认情况下ref.current拿到的是组件实例而非真实DOM节点，组件实例本身没有DOM查询方法，需要先拿到组件对应的真实DOM：

• 方案一：用React.forwardRef包裹你的自定义组件，将ref转发到组件内部的根DOM节点上，该方案为React官方推荐写法，无副作用
• 方案二：临时调试可用findDOMNode方法获取组件对应的DOM节点（该方法在React严格模式下会触发警告，不推荐长期使用），示例代码如下：

import { findDOMNode } from 'react-dom';

const ref = useRef(null);
//...
const handleAction = () => {
    if(ref.current) {
        console.log('I get here')
        // 先获取组件对应的真实DOM
        const dom = findDOMNode(ref.current);
        const elem = dom.getElementsByClassName('myClass')[0]
    }
}

return (<div>
     <component ref={ref} />
     <button onClick={handleAction} />
</div>)

优化建议 #

React项目中尽量避免直接进行DOM查询，可直接将ref挂载到你要定位的.myClass对应元素上，性能和稳定性更好。

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