时间戳

首页 > 解决方案 > 使用引导程序在 React 中动态更改 NavDropdown 的标题

reactjs - 使用引导程序在 React 中动态更改 NavDropdown 的标题

问题描述

我用 ReactBootstrap 创建了一个下拉菜单，标题为“登录”。我想在用户登录时将标题动态更改为 SIGN OUT。我已经编写了我的 firebase 授权代码，但我只想更改标题。

这是我的 Home 组件，其中包含 NavBar：

import React from 'react'
import {Navbar,NavDropdown, Nav } from 'react-bootstrap'
import SignIn from './SignIn'


class Home extends React.Component{
    render(){
        return(
            <div>
                <Navbar collapseOnSelect expand="lg" bg="light" >
                    <Navbar.Brand href="/">Home Page</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link href="#features">Home</Nav.Link>
                        <Nav.Link href="#pricing">About Us</Nav.Link>
                        <NavDropdown title="Products" id="collasible-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">1</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">2</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">3</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">4</NavDropdown.Item>
                        </NavDropdown>
                        <Nav.Link href="#pricing">Contact</Nav.Link>
                        <Nav.Link href="#pricing">Shop</Nav.Link>

                        </Nav>
                        <Nav>
                        <NavDropdown title="SIGN IN" id="collasible-nav-dropdown">
                            <NavDropdown.Item href="SignIn">User</NavDropdown.Item>
                            <NavDropdown.Item href="AdminSignIn">Admin</NavDropdown.Item>
                        </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
}



export default Home

标签： reactjsfirebasereact-routerreact-bootstrapnav

解决方案

你需要使用状态。当状态改变时，就会发生重新渲染。

就像是

const [signedIn, setSignedIn] = useState(false);
let titleHere = signedIn? 'Sign Out': 'Sign In';

然后

<NavDropdown.Item onClick={(e: any) => {setSignedIn(true)}}>{titleHere}</NavDropdown.Item>

当事件被触发时，状态发生改变，并发生重新渲染。

推荐阅读