如何访问“this.props.match.params”以及其他道具？答案

【问题标题】：How to access 'this.props.match.params' along with other props?如何访问“this.props.match.params”以及其他道具？
【发布时间】：2019-01-09 16:25:23
【问题描述】：

我的父组件中有这段代码：

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

其中 match 属性将是一个从子组件 (ChampionDetails) 检索数据的函数。我的 ChampionDetails（子）组件的 sn-p：

    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;

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

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

如果您使用react-router 版本>=4，您应该能够通过withRouter HOC 访问路由器内部任何组件的路由器参数。例如：

import { withRouter } from 'react-router-dom';
...
export withRouter(ChampionDetails);

【讨论】：

【解决方案2】：

您可以将matchProps 作为来自路由器的道具传递，this.props 用于来自父级的任何道具，然后避免覆盖道具 - 您的 match 道具将覆盖来自路由的道具：

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

当你传播 {...props} 时，你的 match 属性会覆盖 react-router 的 match。

【讨论】：

【解决方案3】：

Match 道具是react-router-dom 的一部分，因此通过制作另一个名为 match 的道具，您将覆盖它。

最简单的方法：只需将 match={this.handleMatch}/>} 重命名为其他名称 matchHandler={this.handleMatch}/>}

如果必须使用名称match，请将其销毁为const {matchHandler : match} = this.props

【讨论】：