现在点击电影项目，打开的电影详细页面上只有一个静态的文字 .. 我们可以传递给这个电影详细页面一些属性 .. 这样在这个电影详细页面上，你可以利用这些属性对应的数据，比如根据电影的 id 号去向服务端请求电影的详细的内容，然后再把需要的东西显示出来。

先打开 MovieList.js .. 在这个 showMovieDetail 方法里面，在传递给 push 的对象里面，添加一个 passProps 属性 .. 在这里，它的值就是传递给这个 MovieDetail 这个组件的属性 .. 我们把 movie 传递过去 .. 保存 ..

然后打开电影详细页面使用的组件 .. MovieDetail.js .. 在这个文件里面定义的组件里 .. 先添加一个 constructor 方法 .. 给它一个 props 参数 .. 在这个方法里面，先执行一下 super 方法，再把 props 交给这个方法 ..

我们可以先把传递过来的 movie 这个属性输出到控制台上看一下 .. 用一个 console.log .. 输出 this.props.movie ..

打开浏览器的控制台 .. 点击某个电影项目 .. 在控制台上显示的就是 movie 属性里的内容 .. 我们可以根据 movie 里面的 id 的值，去向服务端发出请求，请求的地址也是豆瓣提供的电影内容的 api ..

先到 postman 里面试一下 .. 这个豆瓣提供的电影详细内容的 api 的地址是 v2/movie/subject .. 后面加上电影的 id 号 .. /1292063 .. 这里会返回很多跟这部电影相关的内容 .. 评分 .. 评论数 .. 还有 简介 等等 .. 一会儿我们先用一个 summary 这个属性 .. 也就是电影的简介 ..

回到编辑器 .. 先在这个组件里的 constructor 方法里面设置一下组件的初始状态 .. this.state .. 添加一个 movieDetail 状态 .. 它的值先设置成一个空白 ..

再去定义一个恒量 .. 名字是 REQUEST_URL .. 它的值就是要请求的 api 的地址 .. 这里用一个字符模板 .. api.douban.com .. v2 .. movie .. subject .. 后面是电影的 id 号，可以使用 this.props.movie.id 得到这个 id 号 ..

`https://api.douban.com/v2/movie/subject/${this.props.movie.id}`

然后添加一个可以向服务端请求数据的方法 .. 这个方法跟 MovieList 里面的那个 fetchData 有点像 .. 打开这个文件 .. 找到 fetchData .. 复制一下 .. 回到 MovieDetail.js .. 粘贴过来 .. 简单修改一下 .. 给这个方法一个 REQUEST_URL 参数 ..

在第二个 then 这里，去设置一下 movieDetail 这个状态 .. 它的值就是 responseData ..

然后在 constructor 里面，使用一下这个方法 .. this.fetchData(REQUEST_URL) ... 这样在这个组件里面，movieDetail 这个状态里包含的就会是电影的详细内容 ..

下面我们可以把电影的简介显示出来 .. 找到这个组件的 render 方法 .. 要显示的内容是在 movieDetail 这个状态下的 summary 这个属性里 .. 保存 ..

再到模拟器上去试一下 .. 点击一个电影项目 .. 打开电影的详细页面 .. 在这里会显示出来自豆瓣的电影的简介 .. 这里文字的显示会有点问题，文字没有换行 ..

下面我们再去解决一下 .. 问题应该是在 container 这个样式 .. 打开 Styles 下面的 Main.js .. 找到 container 这个样式 .. 去掉这里的 flexDirection .. 保存 .. 再打开一个电影 .. 现在这个简介就显示正常了 ..