重新渲染后组件丢失

大佬教程收集整理的这篇文章主要介绍了重新渲染后组件丢失，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决重新渲染后组件丢失？

开发过程中遇到重新渲染后组件丢失的问题如何解决？下面主要结合日常开发的经验，给出你关于重新渲染后组件丢失的解决方法建议，希望对你解决重新渲染后组件丢失有所启发或帮助；

我想创建一个 sql 编辑器。为此，我需要显示我当前连接到哪个数据库。

如果我从下拉菜单中选择某个数据库，下拉组件将完全消失。

顺便说一句：我使用 bootstrap 库作为下拉菜单

这是我目前得到的：

App.Js

@H_801_15@import header from "./components/header";
import Switch from "react-bootstrap/Switch";
import {Route,useParams} from "react-router";
import Navbar from "./components/Navbar";
import {useStatE} from "react";
import queryPage from "./components/queryPage";
import ChangeDB from "./components/essentials/ChangeDB";



function App() {
    const [connections,setConnections] = useState([
        {
            ID: 1,dbname: "db1"
        },{
            ID: 2,dbname: "db2"
        },{
            ID: 3,dbname: "db3"
        }]
    );
    const [db,setDB] = useState(1);

    const onDBChange = ({ID}) => {
        setDB(() => ID)
    }
    return (
    <div classname="App">
        <header database={db} connections={Connections}/>
        <Switch>
            <Route exact path={["/","/home","db/:ID" ]}>
                <queryPage />
            </Route>
            <Route path="/db/:ID"><ChangeDB callBACk={onDBChangE} /></Route>
        </Switch>
    </div>
  );
}

export default App;

header.Js

@H_801_15@import {Button,Form,FormControl,Nav,Navbar,NavDropdown} from "react-bootstrap";
import "./header.CSS";
import { link } from 'react-router-dom';

function header({ database,connections}) {
    alert(databasE);
    return (
        <Navbar bg="light" expand="lg">
            <logo />
            <Navbar.brand href="#home">fnmsql ClIEnt</Navbar.brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse ID="basic-navbar-nav">
                <Nav classname="mr-auto">
                    <Nav.link href="#home">Home</Nav.link>
                    <Nav.link href="#link">link</Nav.link>
                    {Connections.map(con => {
                        if(con.ID === databasE) {
                            return (
                                <NavDropdown title={Con.dbnamE} ID="basic-nav-dropdown">
                                    {Connections.length !== 0 ?
                                        connections.filter(ID => (database !== ID)).map(con => (
                                            <NavDropdown.Item classname={"bootstrap-overrIDes"} href={"#db/" + con.ID}>{Con.dbnamE}</NavDropdown.Item>
                                        ))
                                        :
                                        <NavDropdown.Item Disabled="true">No Database Connections</NavDropdown.Item>
                                    }
                                </NavDropdown>
                            )
                        }
                    })}

                </Nav>
                <Form inline>
                    <FormControl type="text" placeholder="Search" classname="mr-sm-2" />
                    <button variant="outline-success">Search</button>
                </Form>
            </Navbar.Collapse>
        </Navbar>
    );
}

const logo = () => {
    return (
        <link to="./">
        <img src={logoWhitE} alt={"ADVA Optical Networking SE"} classname={"img"}/>
        </link>
    )
}


export default header;

除了将其放入一些额外的组件之外，我还没有找到另一种从 HashRouter 读取的解决方案：

ChangeDB.Js

@H_801_15@
function ChangeDB({CallBACk}) {
    let ID = useParams();
    callBACk(ID);
    return null;
}

export default ChangeDB;

解决方法

大佬总结

以上是大佬教程为你收集整理的重新渲染后组件丢失全部内容，希望文章能够帮你解决重新渲染后组件丢失所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。