主页 / 问题 / 1094468
Accepted
Timofey Melentev
Asked:2020-03-14 07:17:25 +0000 UTC2020-03-14 07:17:25 +0000 UTC

从另一个组件调用导航栏状态更新

  • 772

如何从另一个登录组件重新渲染 NavMenu 组件？我知道不可能从一个组件更改某些特定其他组件的状态？有什么办法吗？

    export class Login extends Component {
    constructor(props) {
        ....
    }

    ...

    async login() {
        var data = {
            login: this.state.login,
            password: this.state.password
        }
        await fetch('sendrequest/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
            .catch(error => console.log(error));


    }

    ...

    render() {
        return (
            <Col lg={3}>
                <form>
                    <input type="email" id="emailInput" onChange={this.onChangeLogin} name="passwordInput" placeholder="E-Mail" />
                    <input type="password" id="passwordInput" onChange={this.onChangePassword} name="passwordInput" placeholder="Password" />
                    <Button className="btn btn-primary" onClick={this.login} >Log in</Button>
                </form>
                <Button className="btn btn-primary" onClick={this.refreshToken}>Refresh Token</Button>
            </Col>
        )
    }
}

导航栏本身如下所示：

...

export class NavMenu extends Component {
    static displayName = NavMenu.name;

    async componentDidMount() {
        await this.getProfileData();
    }

    constructor(props) {
        ....
        this.state = {
            collapsed: true,
            firstName: ""
        };        
    }

    ...


    async getProfileData() {
        await fetch('sendrequest/getProfileData', {
            method: "POST",
            headers: {
                'Content-Type': "application/json"
            }
        })
            .then(response => response.json())
            .then(result => this.setState({
                firstName: result.firstName
            }));
    }

    async logout(e) {
        e.preventDefault();
        await fetch('sendrequest/logout', {
            method: "POST",
            headers: {
                'Content-Type': "application/json"
            }
        });
        this.setState({ firstName: undefined });

    }

    render() {
        var loginMenu = <NavLink tag={Link} className="text-dark" to="/login">Log in</NavLink>;
        if (this.state.firstName != null && this.state.firstName != undefined) {
            loginMenu = <React.Fragment><NavItem><NavLink tag={Link} className="text-dark" to="/profile">{this.state.firstName}</NavLink></NavItem>
                <NavItem><NavLink tag={Link} className="text-dark" to="/profle" onClick={this.logout}>Logout</NavLink></NavItem></React.Fragment>;

        }
        return (
            <header>
                <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
                    <Container>
                        <NavbarBrand tag={Link} to="/">LibraryClient</NavbarBrand>
                        <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
                        <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
                            <ul className="navbar-nav flex-grow">
                                <NavItem>
                                    <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                                </NavItem>
                                <NavItem>
                                    <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
                                </NavItem>
                                <NavItem>
                                    <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
                                </NavItem>
                                {loginMenu}
                            </ul>
                        </Collapse>
                    </Container>
                </Navbar>
            </header>
        );
    }
}
javascript

2 个回答

  1. Best Answer

    小记：

    我建议的方式可能不是“反应方式”，但它简单且有效。
    也许拥有一个外部/全局状态存储会更正确。

    如何从另一个组件重新渲染一个组件？

    举个例子：

    import * as React from "react";


const COMPONENT: symbol = Symbol();

export default class App extends React.Component {
  tic = 0;
  i = setInterval(() => {
    this.tic++;
  }, 1e3);
  ref = (el: HTMLElement | null) => {
    // @ts-ignore
    if (el) el[COMPONENT] = this;
  };
  render() {
    return (
      <div className="App" ref={this.ref}>
        <span>{this.tic}</span>
      </div>
    );
  }
}

setInterval(() => {
  const app = document.querySelector(".App");
  if (app && COMPONENT in app) {
    // @ts-ignore
    const component: React.Component = app[COMPONENT];
    component.forceUpdate();
  }
}, 3e3);
    • 1
    • 0

相关问题