用Navbar反应传递状态给孩子

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

将道具传递给NavItem的正确方法是什么

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

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

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