React中getElementById莫名失效：自定义类组件ID不生效求助

为什么id找不到？ #

• 你给<FilterGroup id="filters"/>传递的id只是组件的props参数，React不会自动把这个参数挂载到DOM元素上——除非你的组件内部主动把它传给某个真实DOM节点。
• 你的FilterGroup组件render返回的是React Fragment（<>），它不会生成真实的DOM元素，所以就算传了id，也没有对应的DOM节点可以绑定这个id，自然用document.getElementById找不到。

为什么调用result()会报错？ #

你想调用组件的result()方法，但document.getElementById获取的是DOM元素对象，而不是React组件的实例。DOM元素根本没有result()这个方法，这是把DOM对象和React组件实例搞混了。

正确的实现方式 #

要调用组件的方法，需要用React Ref获取组件实例；如果确实需要给DOM加id，要在组件内部的真实元素上绑定。

修正后的代码 #

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

class FilterGroup extends Component {
    constructor(props) {
        super(props)
    }

    result() {
        return ("some-text");
    }

    render() {
        // 把props中的id传给内部真实DOM元素（比如这里的div）
        return (
            <div id={this.props.id}>
                {/* 你的组件内容 */}
            </div>
        )
    }
}

function App () {
    // 创建ref用于保存FilterGroup组件实例
    const filterGroupRef = useRef(null);

    function read () {
        // 通过ref直接获取组件实例，调用result方法
        const result = filterGroupRef.current.result();
        console.log(result);
    }

    return(
        <div>
            <button onClick={read}>Read</button>
            {/* 将ref绑定到FilterGroup组件上 */}
            <FilterGroup ref={filterGroupRef} id="filters"/>
        </div>
    )
}

export default App; 

关键说明 #

• useRef创建的引用绑定到组件后，filterGroupRef.current就是FilterGroup的实例，直接调用result()即可实现需求。
• 如果需要DOM元素的id，在FilterGroup内部的真实DOM节点（比如示例中的div）上设置id={this.props.id}，此时document.getElementById("filters")就能找到该DOM元素，但这和调用组件方法是两个独立的需求，不要混淆。

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