Question

我的React应用程序中有一个带有idTeam的组件。

当我在具有事件Button的子组件中单击onClick时，我想在道具中将此Details传递到idTeam页面。

这是我的Route和我的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

#include <stdio.h>
int timeDifference (int startTime, int endTime);
int countSeconds (struct time time1);
int timeCount (int inputSeconds);
int abs(int number);

struct time
{
    int hours;
    int minutes;
    int seconds;
};

struct time time1 = {3,45,15};
struct time time2 = {9,44,03};


int main(int argc, char const *argv[])
{


    printf("\nStart Time in seconds = %d", countSeconds(time1));
    printf("\nEnd Time in seconds = %d", countSeconds(time2));
    printf("\nThe difference in seconds = %d",timeDifference(countSeconds(time2),countSeconds(time1)));
    timeCount(timeDifference(countSeconds(time2),countSeconds(time1)));


       return 0;
}

//The duration is 5 hours, 58 minutes and 48 seconds

int timeDifference (int startTime, int endTime)
{
 int diff;


 diff = abs(endTime - startTime); //diff in seconds

 return diff;

}

// function to change the time to seconds
int countSeconds (struct time time_)
{
    int count;

    count = time_.hours*60*60 + time_.minutes*60 + time_.seconds;


    return count;

}

//https://stackoverflow.com/questions/30829923/i-want-to-multiply-two-different-structures-in-c-language

int abs(int number)
{
 if (number < 0)
  number = number * -1;

  return number;
}

//program to count hours. min, seconds

int timeCount (int inputSeconds)
{
    int h,m,s; //hours, seconds, minutes
    int remainingSeconds, secondsInHour = 3600, secondsInMinute = 60;

    h = inputSeconds/secondsInHour;
    remainingSeconds = inputSeconds - (h * secondsInHour);
    m = remainingSeconds/secondsInMinute;
    remainingSeconds = remainingSeconds - (m*secondsInMinute);
    s = remainingSeconds;

    printf("\n%d hour, %d minutes and %d seconds",h,m,s);
}

在呈现组件时会调用您的函数，请尝试使用箭头函数

Answer 2

在您的“父组件”中，尝试将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}`);
}

如何通过“ onClick”将路线中的道具从我的组件传递到子组件

2 个答案: