这是我第一次创建自己的React类组件，由于某种原因，它的id没有“take”。

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

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

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

    render() {
        return (
            <>
                (deleted a lot of stuff)
            </>
        )
    }
}

function App () {
    function read () {
        var filters = document.getElementById("filters")
        var result = filters.result()
        console.log(result);
    }

    return(
        <div>
        <button onClick={read}>
        Read
        </button>
        <FilterGroup id="filters"/>
        </div>
    )
}

export default App;

当我点击Read按钮时，我得到了一个错误，因为document.getElementById（“filters”）返回了null。在我看来，read（）函数是在DOM加载和建立之后被调用的long，而且我的构造函数正确地沿着了props，所以我不明白id是怎么丢失的。发生了什么？