常用的参数传递方式有3种。下面我将通过示例向您展示如何使用这三种方法：传递参数的组件'exportdefaultclassMessageextendsComponent{state={messageArr:[{id:'01',title:'Message1'},{id:'02',title:'Message2'},{id:'03',title:'Message3'}]}render(){const{messageArr}=this.statereturn(
{messageArr.map((msgObj)=>{return({/*将params参数传递给路由组件*/}{/*{msgObj.title}*/{/*将搜索参数传递给路由组件*/}{/*{msgObj.title}*/}{/*将状态参数传递给路由组件*/}{msgObj.title})})}
{/*注册路由*/}
{/*声明接收参数*/}{/**/}{/*搜索参数不需要声明*/}{/**/}{/*状态参数不需要声明接收*/})}}Component接收参数importReact,{Component}from'react'importqsfrom'querystring'constdetailData=[{id:'01',content:'Hello,China'},{id:'02',content:'Hello,Shanghai'},{id:'03',content:'你好，北京'}]exportdefaultclassDetailextendsComponent{render(){//接收params参数//const{id,title}=this.props.match.params//接收搜索参数//const{search}=this.props.location//const{id,title}=qs.parse(search.slice(1))//接收state参数const{id,title}=this.props.location.state//查找对应id的内容constfindResult=detailData.find((detailObj)=>{returndetailObj.id===id})return(
ID：{id}标题：{title}内容：{findResult.content})}}
