得到地址里的参数

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

前面在定义 shows 这个路由的时候,在地址里用了一个参数 .. 就是这个 :id ,在跟它对应的组件里,我们可以得到这个参数的值。这样你就可以使用这个参数的值,为用户显示出对应的内容。一般就是使用这个 id ,向服务端请求对应的内容,请求回来以后再去设置一下组件的状态。

先看一下怎么得到这个参数的值 … 在这个路由对应的组件里面,也就是 Show 这个组件 .. 添加一个 constructor ,构造函数 .. 给它一个 props 参数 … 在这个方法里再执行一下 super .. 把 props 交给这个 super 。

这样我们就可以在这个构造函数里使用 this.props 得到组件的属性了。路由参数的值是在 params 这个属性里面。 这里可以在控制台上输出这个属性 … console.log(this.props.params);

保存 .. 回到浏览器 .. 现在的地址是 tv/shows/1 … 访问这个地址的时候,你会看到,在控制台上会输出一个对象,这就是 this.props.params .. 这个对象里有一个 id 属性 .. 它的值就是地址里的 id 这个参数的值。

你可以利用这个参数的值,向服务端请求对应的内容。 回到编辑器,我们直接在这个组件的 render 方法里面使用一个这个 id 参数 .. 把它放在 节目 的后面, {this.props.params.id} ..

回到浏览器 .. 这个节目的后面会显示 id 参数的值 .. 再修改一下地址上的这个 id 参数 .. 设置成 3 .. 节目后面的 id 的值也会随着变化 ..

得到地址里的参数《 React 路由 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点