Как передать опору в моем маршруте от моего компонента к дочернему компоненту с помощью onClick

Question

У меня есть компонент в моем приложении реакции с idTeam.

Когда я нажимаю на Button в дочернем компоненте с событием onClick, я хочу передать свою страницу Details с этим idTeam в моем реквизите.

Вот мои Route s & my Switch:

{/* ... other components ... */}
    <Menu.Item
      name='details'
      active={activeItem === 'details'}
      onClick={this.handleItemClick}
    >
      <Link to="/details">Détails</Link>
    </Menu.Item>
  </Menu>
</div> 
<Switch>
  <Route exact path='/' component={Home} />
  <Route  path='/equipes' component={Teams} />
  <Route  path='/details/:idTeam' component={Details} />
  <Route component={Page404} />
</Switch>

Мой родительский компонент:

const teamsComponents = this.state.teamsList.map((team)=> (
  <TeamItem 
    key={team.idTeam}
    strTeamBadge={team.strTeamBadge}
    strTeam={team.strTeam}
    strStadium={team.strStadium}
    goToDetails={this.goToDetails(team.idTeam)}
  /> 
)) 

И функция goToDetails():

goToDetails = (idTeam) => {
  return <Link to={`/details/${idTeam}`} render={(props) => <Details 
  idTeam={idTeam} {...props} /> } />
} 

И дочерний компонент:

onReceiveDetails = () => {
  this.props.goToDetails()
  console.log('mes props 2 :' , this.props.params.idTeam);
}

<Button
  icon='group'
  label={{ as: 'a', basic: true, content: 'Détails', 
  color:'black' }}
  labelPosition='right'
  color='black'
  onClick={() => this.onReceiveDetails()}
/>

Когда я пытаюсь нажать на кнопку, у меня появляется сообщение "_this.props.goToDetails - это не функция" ...

Есть идея оставить этот idTeam на странице сведений?

Answer 1

В вашем "Родительском компоненте" попробуйте передать goToDetails реквизит как goToDetails={() => this.goToDetails(team.idTeam)} вместо того, как вы это делаете в настоящее время.Это обеспечит передачу функции дочернему компоненту (я полагаю, TeamItem).

Ваш родительский компонент будет выглядеть следующим образом:

const teamsComponents = this.state.teamsList.map((team) => (
  <TeamItem 
    key={team.idTeam}
    strTeamBadge={team.strTeamBadge}
    strTeam={team.strTeam}
    strStadium={team.strStadium}
    // -> change the line below
    goToDetails={() => this.goToDetails(team.idTeam)}
  /> 
))

Кроме того, в вашем goToDetails функция, вы можете использовать this.props.history.push(<YOUR-PATH>) как это:

goToDetails = (idTeam) => {
  this.props.history.push(`/details/${idTeam}`);
}

Answer 2

 <TeamItem 
  key={team.idTeam}
  strTeamBadge={team.strTeamBadge}
  strTeam={team.strTeam}
  strStadium={team.strStadium}
  goToDetails={() => this.goToDetails(team.idTeam)}
 /> 
 )) 

Ваша функция вызывается при рендеринге компонента, попробуйте использовать функцию стрелки