Question

我从引导程序中获得了一个简单的反应Navbar，我想将用户ID从导航栏中传递给孩子。

我可以做到这一点，但是在这种情况下，子组件会显示两次，一次在导航栏上方，第二次在下方。

这仅在我插入以下命令时发生：

<UserConfig userid={this.state.user.userid} />

这是导航中我App.js的一部分我尝试了很多地方将其粘贴，但是没有任何效果

  render() {
    
    console.log(this.state.user.userid);
      return (  
      
      <div className="App container" >
        <UserConfig userid={this.state.user.userid} />
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Hallo {jwt_decode(authentication.getAccessToken()).given_name}!</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
         </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <LinkContainer to="/config">
                <NavItem >Konfiguration</NavItem>
              </LinkContainer>
              <LinkContainer to="/logout">
                <NavItem>Logout</NavItem>
              </LinkContainer>
              <LinkContainer to="/callback">
                <NavItem>Callback</NavItem>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes />
      </div>
    );
  }

在我的UserConfig.js中，我只使用this.props.userid，它仅在导航栏崩溃时显示该值。...

您能帮我解决这个问题吗？实际上，我只是想将用户ID从App.js传递到UserConfig.js，而不会破坏我的导航。

UserConfig

  render() {   
    console.log(this.props.userid); 
    return (

      <div className="Login">
        <form onSubmit={this.handleSubmit}>
          <FormGroup controlId="hersteller" >
            <ControlLabel >Hersteller</ControlLabel>
            <FormControl
              autoFocus
              type="text"
              value={this.state.hersteller}
              onChange={this.handleChange}
            />
          </FormGroup>
  
        ......

Answer 1

What is the correct way to pass props to NavItem

从这个问题...尝试这个：

<LinkContainer to="/config">
    <NavItem data-userid={this.state.userid} >Konfiguration</NavItem>
</LinkContainer>

我假设这是配置页面，您也试图获取该值？然后，您可以删除导航上方的UserConfig组件（应删除双重渲染）。

使用Navbar对传递子状态做出反应

1 个答案: