如何访问“this.props.match.params"以及其他道具? [英] How to access 'this.props.match.params' along with other props?

问题描述

我的父组件中有此代码:

<ChampionDetails {...props} match={this.handleMatch}/>}/>

其中匹配道具将是一个从子组件(ChampionDetails)中检索数据的函数.我的 ChampionDetails(子)组件的片段:

 import React, { Component } from 'react';class ChampionDetails 扩展组件 {状态 = {champId:this.props.match.params.id,冠军数据:空，匹配:假}componentDidMount(){console.log('ChampionDet 已安装')this.handleChampInfo();console.log(this.props.match)}componentDidUpdate(){console.log('ChampionDet 更新')}handleChampInfo=()=>{让冠军数据 = [];让 id = this.state.champId控制台日志(ID)fetch('/api/getChampion?id='+id).then(data=> { return data.json() }).then(json=> {控制台日志(json.data)；champData.push(json.data);this.setState({冠军数据:json.data，匹配:真})this.props.match(true)//this.props.history.push('/champions/'+id)}).catch(错误=>{控制台日志(错误)})}使成为(){返回(<div><p>{this.state.champId}</p>{this.state.champData===null ?空:<p>{this.state.champData.roles}</p>}

)}}导出默认 ChampionDetails；

这里的问题是，如果我在我父母的路由中有 match={}，那么 this.props.match.params.id 将变为未定义.如果我删除 match={} 那么我可以检索 this.props.match.params.id

在我的情况下，我想知道是否可以传递其他道具，同时仍然可以访问 this.props.match.params.id.

任何帮助将不胜感激！

解决方案

您可以将 matchProps 作为来自路由器的道具传递，this.props 作为来自路由器的任何道具parent ，然后避免覆盖道具 - 您的 match 道具正在覆盖路线中的道具:

<冠军详情{...matchProps}{...this.props}handleMatch={this.handleMatch}/>}/>

当你传播 {...props} 时，你的 match 道具会覆盖 react-router 的 match.

I have this code in my parent component:

<Route path='/champions/:id' render={(props) => <ChampionDetails {...props} match={this.handleMatch}/>}/>

where the match prop will be a function that retrieves data from the child component (ChampionDetails). A snippet of my ChampionDetails (child) component:

    import React, { Component } from 'react';

    class ChampionDetails extends Component {
      state = {
        champId:this.props.match.params.id,
        champData:null,
        match:false
      }

      componentDidMount(){
        console.log('ChampionDet mounted')
        this.handleChampInfo();
        console.log(this.props.match)
      }

      componentDidUpdate(){
        console.log('ChampionDet updated')
      }


      handleChampInfo=()=>{
        let champData = [];
        let id = this.state.champId
        console.log(id)
        fetch('/api/getChampion?id='+id)
          .then(data=> { return data.json() })
          .then(json=> {
            console.log(json.data);
            champData.push(json.data);
            this.setState({
              champData:json.data,
              match:true
            })
            this.props.match(true)
            // this.props.history.push('/champions/'+id)
          })
          .catch(err=>{
            console.log(err)
          })
      }

      render(){
        return(
          <div>
            <p>{this.state.champId}</p>
            {this.state.champData===null ? null:<p>{this.state.champData.roles}</p>}
          </div>
        )
      }
    }

    export default ChampionDetails;

The problem here is that if I have the match={} in my parent's route, then this.props.match.params.id will become undefined. If I remove match={} then I can retrieve this.props.match.params.id

I would like to know if its possible to be able to pass other props while still have access to this.props.match.params.id in my case.

Any help will be much appreciated!

解决方案

You can pass matchProps as the props from the router, this.props for any props from the parent and then just avoid overwriting props - your match prop is overriding the props from the route:

<Route path='/champions/:id' render={(matchProps) =>
  <ChampionDetails
    {...matchProps}
    {...this.props}
    handleMatch={this.handleMatch}
  />
}/>

When you spread {...props} your match prop overrides react-router's match.

这篇关于如何访问“this.props.match.params"以及其他道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！