如何在React中更改document.getElementById

Question

我正在创建一个带有显示不同元素的标签的页面。由于无法访问通过.push创建的元素，因此我想到使用document.getElementsByClassName和document.getElementById，但我认为这是一种不好的做法。 .push在openTabs()函数中，其余部分在activeTabs中。如有必要，建议使用它吗？仅使用React，我应该如何正确地做到这一点？

    class App extends Component {
    constructor(props, context){
        super(props, context);

        ["openTabs", "removeTab", "activeTabs",].forEach((method) => {
            this[method] = this[method].bind(this);
        });
        this.displayData = [];

        this.state = {
            navigation: {
                menu: [],
            },
            tabs:{
                tabsLi: [],    
            },
            divIframe:{
                tabsDivIframe: [],
            },
            tabsiframe: '',
            showtabs: true,
            showdata: this.displayData,
            postVal: "",
            addActiveTabs: "",
            addIndexTabs: '',
            //closeTabs: false,
        };
    }

    componentDidMount() {
        fetch('json_menuFIN.php')
            .then(response => response.json())
            .then(data =>{
                this.setState({navigation: data});
            })
        this.activeTabs(this.state.addIndexTabs)
    }

    openTabs(e, url, iframe, trdtitle){
        //Evitar apertura automatica href
        e.preventDefault();
        //Cambiar la primera letra a mayuscula y las demas a minusculas
        function firstUppercase(string){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }
        trdtitle = firstUppercase(trdtitle.toLowerCase());
        url = url.toLowerCase();
        //Cambiar el estado
        this.setState({
            showtabs: false,
        })
        //Creacion de las tabs + mostrar componentes
        if (this.state.tabs.tabsLi.includes(trdtitle) === false){
            if(iframe  === 'si'){
                this.displayData.push(<div key={trdtitle.replace(/ /g, "")} id={"myTab"+trdtitle.replace(/ /g, "")} className="myTab"><iframe title={"iframe"+trdtitle} className="iframetab" src={url}></iframe></div>);
            }
            else{
                this.displayData.push(<div key={trdtitle.replace(/ /g, "")} id={"myTab"+trdtitle.replace(/ /g, "")} className="myTab"><div className="iframetab">{url}</div></div>);
            }
            this.setState({
                tabs: { tabsLi:[...new Set(this.state.tabs.tabsLi),trdtitle].filter(function(el) { return el; })},
                showdata : this.displayData,
                postVal : trdtitle,
            })
        }
    }

    activeTabs(value){
        this.setState({
            addActiveTabs: value, 
        })
        var i, tabcontent;
        tabcontent = document.getElementsByClassName("myTab");
        for (i = 0; i < tabcontent.length; i++) {
            //tabcontent[i].style.display = "none";
            tabcontent[i].className =
            tabcontent[i].className.replace( /(?:^|\s)index-big(?!\S)/g , '' )
        }

        var tabvalue = ("myTab"+value).replace(/ /g, '');
        if(tabvalue !== "myTab"){
            document.getElementById(tabvalue).className += " index-big";
        }
    }

    removeTab(v){
        for(var i = 0; i < this.state.tabs.tabsLi.length; i++){
            if(this.state.tabs.tabsLi[i] === v){
                this.state.tabs.tabsLi.splice(i, 1);
                this.state.showdata.splice(i, 1);
            }
        }
        this.setState({
            tabsLi:this.state.tabs.tabsLi,
            showdata : this.displayData,
            postVal : "", 
        })
        if(this.state.tabs.tabsLi.length === 0){
            this.state.showdata.pop()
            var showDataArray = this.state.showdata;
            showDataArray.length = 0;
            this.setState({
                showtabs: true,
                showdata: []               
            })
        }
    }

    render(){
        return (
            <>
                    <Tabs
                        navigation={this.state.navigation}
                        textvalue={this.state.textvalue}
                        showtabs={this.state.showtabs}
                        tabs={this.state.tabs}
                        tabsLi={this.state.tabs.tabsLi}
                        divIframe={this.state.divIframe}
                        tabsDivIframe={this.state.divIframe.tabsDivIframe}
                        tabsiframe={this.state.tabsiframe}
                        showdata={this.state.showdata}
                        addActiveTabs={this.state.addActiveTabs}
                        openTabs={this.openTabs}
                        removeTab={this.removeTab}
                        displayData={this.displayData}
                        activeTabs={this.activeTabs}
                    />
            </>
        )
    }
}

class Tabs extends Component {
    constructor(props, context){
        super(props, context);

        ["showCloseTabs", "hideCloseTabs"].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            closeTabs: false,
        };
    }

    showCloseTabs(index, value){
        this.setState({
            closeTabs : true,
            valueTabs: value, 
        })
    }

    hideCloseTabs(){
        this.setState({
            closeTabs: false, 
        })
    }

    render(){
        return(
            <div id="content-tabs" className="tabs">
            {( this.props.showtabs)  
                ? (
                    <>
                    <div className="waiting-leads">
                        <p>Parece que todavía no hay ningún lead...</p>
                        <h3>¡Ánimo, ya llega!</h3>
                        <img src={imgDinosaurio} alt="Dinosaurio"></img>
                    </div>
                    </>
                ) : (
                    <>
                        <ul id="resizable" className="content" >
                            <LiTabs 
                                tabsLi={this.props.tabs.tabsLi}
                                closeTabs={this.state.closeTabs}
                                addActiveTabs={this.props.addActiveTabs}
                                valueTabs={this.state.valueTabs}
                                removeTab={this.props.removeTab}
                                activeTabs={this.props.activeTabs}
                                showCloseTabs={this.showCloseTabs}
                                hideCloseTabs={this.hideCloseTabs}
                            />
                        </ul>
                        <DivAndIframe
                            tabsDivIframe={this.props.divIframe.tabsDivIframe}
                            tabsiframe={this.props.tabsiframe}
                            displayData={this.props.displayData}
                            addActiveTabs={this.props.addActiveTabs}
                        />
                    </>
            )}
            </div>
        );
    }
}

class LiTabs extends Component{
    render(){
        return(
            <>
            {this.props.tabsLi.map((value, index) =>
                <li key={index}
                    onClick={(e) => this.props.activeTabs(value)}
                    //onClick={(e) => {this.props.activeTabs(e, value)/*;this.props.indexDivIframe.bind(this)*/}} 
                    onMouseEnter={(e) => this.props.showCloseTabs(e, value)} 
                    onMouseLeave={(e) => this.props.hideCloseTabs(e, value)} 
                    className={this.props.addActiveTabs === value ? 'active' : ''}>
                    <span>{value}</span>
                    <div onClick={this.props.removeTab.bind(this, value, index)} >
                        {this.props.closeTabs && this.props.valueTabs === value &&(
                            <Icon icon="cerrar" className='ico-cerrar'/>
                        )}
                    </div>
                </li>
            )}         
            </>
        );
    }
}

class DivAndIframe extends Component{
    render(){
        return(
            <div id="content-modules" className="content-modules">
                {this.props.displayData}
            </div>   
        );
    }
}