详情页面布局
1.编写布局结构
//===>src/pages/detail/index.js
import React, { Component } from 'react'
import { DetailWrapper, Header, Content } from './style'
class Detail extends Component {
render() {
return (
<DetailWrapper>
<Header>【Android 音视频开发打怪升级：FFmpeg音视频编解码篇】五、Android FFmpeg＋OpenGL ES播放视频</Header>
<Content>
<img alt='' src='https://img.haomeiwen.com/i2789400/a4bbe5dbbbe5418c?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' />
<p><b>特别说明一下</b>
这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p>
<p><b>特别说明一下</b>
这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p>
<p><b>特别说明一下</b>
这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p>
<p><b>特别说明一下</b>
这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p>
</Content>
</DetailWrapper>
)
}
}
export default Detail
2.编写布局样式
//===>src/pages/detail/style.js
import styled from 'styled-components'
export const DetailWrapper = styled.div`
overflow:hidden;
width:620px;
margin:0 auto;
padding-bottom:100px;
`
export const Header = styled.div`
margin:50px 0 20px 0;
line-height:44px;
font-size:34px;
color:#333;
font-weight:bold;
`
export const Content = styled.div`
color:#2f2f2f;
img{
width:100%;
}
p{
margin:25px 0;
font-size:16px;
line-height:30px;
}
b{
font-weight:bold;
}
`
访问http://localhost:3000/detail页面效果
使用redux管理详情页面数据
我们把数据放进detail的store目录中
新建detail的store目录结构
src/pages/detail/store/index.js
src/pages/detail/store/constants.js
src/pages/detail/store/reducer.js
src/pages/detail/store/actionCreators.js
1.把一些必要的文件统一暴露出来
//===>src/pages/detail/store/index.js
import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'
export { reducer, actionCreators, constants }
2.编写detail页面的reducer
//===>src/pages/detail/store/reducer.js
import { fromJS } from 'immutable'
import * as constants from './constants'
const defaultState = fromJS({
title: '【Android 音视频开发打怪升级：FFmpeg音视频编解码篇】五、Android FFmpeg＋OpenGL ES播放视频',
content: '<img alt="" src="https://img.haomeiwen.com/i2789400/a4bbe5dbbbe5418c?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" /><p><b>特别说明一下</b>这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p><p><b>特别说明一下</b>这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p><p><b>特别说明一下</b>这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p><p><b>特别说明一下</b>这里，OpenGL 线程渲染的过程中，不是直接调用绘制器去渲染，而是通过一个代理来间接调用，这样 OpenGL 线程就不需要关心有多少个绘制器需要调用，统统交给代理去管理就好了。</p>'
})
export default (state = defaultState, action) => {
switch (action.type) {
default:
return state
}
}
3.把detail组件的reducer用全局reducer的combineReducers管理起来
//===>src/store/reducer.js
import { combineReducers } from 'redux-immutable'
import { reducer as headerReducer } from '../common/header/store'
import { reducer as homeReducer } from '../pages/home/store'
import { reducer as detailReducer } from '../pages/detail/store'
const reducer = combineReducers({
header: headerReducer,
home: homeReducer,
detail: detailReducer
})
export default reducer
4.reducer中可以拿到数据了，那么我们就可以去修改Detail页面布局了
//===>src/pages/detail/index.js
import React, { Component } from 'react'
import { DetailWrapper, Header, Content } from './style'
import { connect } from 'react-redux'
class Detail extends Component {
render() {
return (
<DetailWrapper>
<Header>{this.props.title}</Header>
<Content dangerouslySetInnerHTML={{ __html: this.props.content }} />
</DetailWrapper>
)
}
}
const mapState = (state) => ({
title: state.getIn(['detail', 'title']),
content: state.getIn(['detail', 'content'])
})
export default connect(mapState, null)(Detail)
效果不变。
网友评论