在StrictMode和Reactjs Modal Component中不推荐使用findDOMNode

Question

当我打开来自另一个组件的模式时，Reactjs显示此错误 “ index.js：1警告：StrictMode中已弃用findDOMNode。findDOMNode传递了StrictMode内的Modal实例。相反，直接将引用添加到要引用的元素。”

我尝试了许多其他解决方案，但是在我的情况下，它们都不起作用

我的代码文件：

class Routes extends Component {
    componentDidMount() {
        console.log('Component did mount!')
    }
    loginModalRef = ({ handleShow }) => {
        this.showModal = handleShow;
    }
    onLoginClick = () => {
        this.showModal();
    }

    ShopersModalRef = ({ handleShoperShow }) => {
        this.showShoperModal = handleShoperShow;
    }
    onShopersClick = () => {
        this.showShoperModal();
    }

    //ChargeModalRef = ({ handleChargeShow }) => {
    // this.showChargeModal = handleChargeShow;
    //}
    // onChargeClick = () => {
    //  this.showChargeModal();
    //  }
    render() {
        return (
            <div>
                {/*<chargeFeeModal ref={this.ChargeModalRef}></chargeFeeModal>*/}

                <FormModal ref={this.loginModalRef}></FormModal>
                <ShopersModal ref={this.ShopersModalRef}></ShopersModal>

                <AppBar position="sticky" className="appbar">
                    <Toolbar className="NavbarTop">
                        <div className='row w-100'>
                            <div className="col-4 LogoOrBack">
                                <section className="leftBox shopname ml-4">
                                    <Typography className="typography">
                                        {Text}
                                    </Typography>
                                </section>
                            </div>
                            <div className="col-4 centered">
                                <section className="centerBox">
                                    <Typography className="typography">
                                        <b>Stores</b>
                                    </Typography>
                                </section>
                            </div>
                            <div className="col-4 righted">
                                <section className="rightBox">
                                    <Typography className="typography">
                                        <Button className="primary btn AccountBtn" onClick={this.onLoginClick}>
                                            <img alt="user account avatar" src={require('../../../assets/images/placeholder_account.png')} className="buttonImage" /> Account
                                    </Button>
                                        <Button className="primary btn" onClick={this.onLoginClick}>
                                            <i className="fa fa-cart-plus cart"></i>
                                        </Button>

                                    </Typography>
                                </section>
                            </div>
                        </div>
                    </Toolbar>
                    <Toolbar>
                        <div className='row w-100'>
                            <div className='col-lg-4'>
                                {(() => {
                                    //Javascript for changing buttons
                                    switch (history.location.pathname) {
                                        case "/": return <Button onClick={this.onLoginClick} className="primary postalCodeBtn" >
                                            <img alt="home icon" src={require('../../../assets/images/homeicon.png')} className="buttonImage" /> <b>M4b 146, CA</b> <i className="fa fa-chevron-down downIco"></i>
                                        </Button>;
                                        default: return (
                                            <Button onClick={this.onShopersClick} className="primary postalCodeBtn" >
                                                <img alt="home icon" src={require('../../../assets/images/time.png')} className="buttonImage" /> <b style={{ textTransform: 'capitalize' }}>Shoppers Occupied</b>
                                            </Button>
                                        );
                                    }
                                })()}
                            </div>
                            <div className="col-lg-4 centered p-1 pl-4" >
                                <div className="searchContainer">
                                    <i className="fa fa-search searchIcon"></i>
                                    <input className="searchBox" type="search" name="search" placeholder="Search Stores" />
                                </div>
                            </div>
                            {TabsShowOrNo}
                        </div>
                    </Toolbar>
                </AppBar>
                <AnimatedSwitch
                    atEnter={{ opacity: 0 }}
                    atLeave={{ opacity: 0 }}
                    atActive={{ opacity: 1 }}
                    className="switch-wrapper"
                >
                    <Route exact path="/" component={HomePage} />
                    <Route path='/store/orders/' component={OrdersPage} />
                    <Route path='/store/aisles/' component={AislesPage} />
                    <Route path="/store/featured" component={SingleStorePage} />
                    <Route component={NotFound} />
                </AnimatedSwitch>
            </div >
        )
    }
}```
any help will be appreciate