Реагируйте на передачу состояния детям с помощью Navbar - PullRequest
Новая
       7

Реагируйте на передачу состояния детям с помощью Navbar

0 голосов
/ 14 февраля 2019

У меня есть простая реакция Navbar из начальной загрузки, и я хочу передать идентификатор пользователя из панели навигации дочернему элементу.

Я могу сделать это, работая, но когда это так, дочерний компонент отображается дважды, один раз надnavbar и второй раз ниже.

Это происходит только когда я вставляю эту команду: 

<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, который показывает значение только в случае сбоя навигационной панели .....

Можетпожалуйста, помогите мне заставить это работать?На самом деле я просто хочу передать идентификатор пользователя из 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>
  
        ......

1 Ответ

0 голосов
/ 14 февраля 2019

Как правильно передать реквизиты в NavItem

Из этого вопроса ... попробуйте это: 

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

Я предполагаю, что это страница конфигурацииты тоже пытаешься получить значение?Затем вы можете удалить компонент UserConfig над навигацией (который должен удалить двойной рендер).

...