关于react.js:React-向路由组件传递-params-参数

传递参数组件的jsx文件:

import React, { Component } from 'react'
import { Switch,Route,Link } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state ={
    messageArr :[
      {id:'01',title:'音讯1'},
      {id:'02',title:'音讯2'},
      {id:'03',title:'音讯3'}
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj) =>{
              return (
                <li key={msgObj.id}>
                  {/* 向路由组件传递 params 参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              ) 
            })
          }
        </ul>
        <hr/>
        {/* 注册路由 申明接管 params*/}
        <Switch>
          <Route path='/home/message/detail/:id/:title' component={Detail}></Route>
        </Switch>
      </div>
    )
  }
}

接管参数组件的jsx文件:

import React, { Component } from 'react'

const detailData = [
  {id:'01',content:'你好,中国'},
  {id:'02',content:'你好,上海'},
  {id:'03',content:'你好,北京'}
]

export default class Detail extends Component {
  render() {
    // 接管 params 参数
    const {id,title} = this.props.match.params
    const findResult = detailData.find((detailObj)=>{
      return detailObj.id === id
    })
    return (
      <div>
          <li>ID:{id}</li>
          <li>Title:{title}</li>
          <li>Content:{findResult.content}</li>
      </div>
    )
  }
}

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-1核2G-1M带宽-40-100G ,特惠价87.12元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据