Question

我的问题

我使用navbar1创建了一个登录页面。用户进入logged in后，我将显示具有更多字段的新navbar2。但是问题是navbar1仍然位于顶部，即使用户是logged in（即在logged in之后，我也可以在页面顶部看到两个navbars）

我的文件夹结构

  --->App.js
       |
       Navigator.js
       |
       TopMenu.js

App.js文件

import React, { Component } from 'react';
import Navigation from './container/Navigation';
import Topmenu from './container/Topmenu.js'
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from "react-bootstrap";
import './App.css';


class App extends Component {

  state = {
    show: true
  }

  updatestate() {
    this.setState({show: !this.state.show })
  }

  render() {
    return (
<div>
{this.state.show 
          ? <Navigation triggerParentUpdate={this.updatestate}/>
          : null}
          <Topmenu/>
      </div>


    );
  }
}


export default App;

Navigation.js组件

import React, { Component } from "react";
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from "react-bootstrap";
import '../App.css';

export default class Navigation extends Component {
  render() {
    return (
      <div className="App"> 
      <Navbar className="nav-color">
  <Navbar.Header>
    <Navbar.Brand className="nav-brand">
      <a href="#home">Home</a>
    </Navbar.Brand>
  </Navbar.Header>
  <Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="#">
      Dashboard
    </NavItem>
    <NavItem eventKey={2} href="#">
      Cards
    </NavItem>
    <NavDropdown eventKey={3} title={`Welcome`} id="basic-nav-dropdown">
      <MenuItem eventKey={3.1}>Action</MenuItem>
      <MenuItem eventKey={3.2}>Another action</MenuItem>
      <MenuItem eventKey={3.3}>Something else here</MenuItem>
    </NavDropdown>
  </Nav>
  </Navbar.Collapse>
</Navbar>
          <h1>
            Welcome <code>User</code>.
          </h1>
      </div>
    );
  }
}

Topmenu.js组件

import React, { Component } from "react";
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from "react-bootstrap";
import { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import { 
  SignIn,
  ConfirmSignIn,
  RequireNewPassword,
  VerifyContact,
  ForgotPassword,
  TOTPSetup } from 'Auth';
import '../App.css';
import Navigation from './Navigation';
 class Topmenu extends Component {
   constructor(props) {
     super(props);
     this.state = {
      username: 'notknown'
    }
   }

async componentWillMount() {
  try {
  triggerparent = () => {
    this.props.triggerParentUpdate();    --> Here i am triggering an event which will change the state in App.js Navigation Component
  }
}
  catch(e) {
    if (e !== 'No user name') {
      alert(e);
    }
  }
}
handleLogout = async event => {
  alert("you are out");
  await Auth.signOut()
  .then(() => {
  this.props.onStateChange('signedOut', null);
  })
  .catch(err => {
  console.log('err: ', err)
  });
}

  render() {
    return (
      <div className="App">
      <Navbar className="nav-color">
  <Navbar.Header>
    <Navbar.Brand className="nav-brand">
      <a href="#home">Brand</a>
    </Navbar.Brand>
  </Navbar.Header>
  <Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="#">
      Dashboard
    </NavItem>
    <NavItem eventKey={2} href="#">
      Cards
    </NavItem>
    <NavDropdown eventKey={3} title={`Welcome ${this.state.username}`} id="basic-nav-dropdown">
      <MenuItem eventKey={3.1}>Action</MenuItem>
      <MenuItem eventKey={3.2}>Another action</MenuItem>
      <MenuItem eventKey={3.3}>Hide</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey={3.4} onClick={this.handleLogout}>Signout</MenuItem>
    </NavDropdown>
  </Nav>
  </Navbar.Collapse>
</Navbar>
          <h1>
            Welcome <code>Join</code>.
          </h1>
      </div>
    );
  }
}

export default withAuthenticator(Topmenu,false,[<SignIn/>,
  <ConfirmSignIn/>,
  <RequireNewPassword/>,
  <VerifyContact/>,
  <ForgotPassword/>,
  <TOTPSetup/>]);

我尝试过的事情

在Topmenu.js组件中，我正在componentwillmount中调用一个事件，该事件将在triggerParentUpdate中触发App.js，从而触发updatestate()功能。

triggerparent = () => {
        this.props.triggerParentUpdate();
      }

但这不起作用。

感谢任何帮助谢谢

Answer 1

您的triggerParentUpdate()未为<Topmenu>组件定义。

在 App.js 文件中查看代码：

<div>
   {this.state.show 
      ? <Navigation triggerParentUpdate={this.updatestate}/>
      : null}
   <Topmenu/>
</div>

编辑：

您应该这样做：

<div>
   {this.state.show 
      ? <Navigation/>
      : null}
   <Topmenu triggerParentUpdate={this.updatestate}/>
</div>

在子组件中将状态值从子组件传递到父组件

1 个答案: