react怎么写组件( 二 ) _组件

这里是一个使用样例：/css-modules/webpack-demo写在最后的话目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSS in JS,CSS Modules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import，样式和组件都有了，不过仍需实践。
3.react redux怎样写可重用组件一个网站，从功能上划分，都能整理出一个个细小的组件，比如一个头部，一个按钮，一个banner，那么怎样才能写好一个可以在多个页面共享数据或私有状态的组件呢？以一个移动端常见的header头部为例，左边是返回按钮，有的还带有文字，中间是标题文字，右边可能有图片或者文字。
返回按钮 标题返回按钮返回文字（backText）标题（title）图片或文字（icon）返回点击事件图片或文字点击事件（handleClick）背景样式文字样式这8个基本因素是所有头部都共用的，有的可有，有的可无，为了保证每个网页都能调用同一个头部组件，又要确保文本和事件还有样式可以自定义。将可变的因素提取出来，通过变量的方式传入组件。
在react中，传递变量用this.props 。const {backText, title, icon, handleClick} = this.propslet _backText = backText || false, _title = title || false, _icon = icon || falsereturn ( {_backText} {_title} ) 在父容器里面调用header组件的用法和安卓上类似，都是通过参数初始化配置。
handleClick（){ //注意，使用context的童鞋，需要定义contextType才可以，不然会报错 this.context.router.go(-1)}render() { return ()}static contextTypes = { router: React.PropTypes.object.isRequired}；通过简单的配置，就能构造更多可复用的组件，组件拆的越细，复用的程度就越高，这里没有做传入样式的例子，但是样式的初始化也是类似的方法。还有常用的组件，如弹框：标题中间内容，可以是text或者带有多个标签样式的text 左边按钮，通常叫做取消右边按钮，通常叫做确认跟header组件实现一样，首先把可变的数据部分和事件抽象出来。
标题（title）中间内容（content）左边按钮文本（leftText）右边按钮文本（rightText）左边按钮的点击事件（leftClick）右边按钮的点击事件（rightClick） render() { const {title, content, leftText, rightText, leftClick, rightClick} = this.props //这里再做一次判断空数据或者为定义数据的处理，没人能保证传递进来的参数一定存在或者一定不为空。return ( {title} {content} {leftText} {rightText} )} 父容器组件调用弹框组件 leftClick（) { //左边按钮事件}rightClick（) { //右边按钮事件}render() { const content = 提示语1提示语2 return ( )} 到这里就结束了吗？不是的，我们知道，还有一个东西叫做state,react中，控制弹框的出现和消失，通过state来控制，而我这里要讲的是react和redux结合使用，发送一个dispacth action改变state的状态，使得弹框出现和隐藏。
leftClick（) { //左边按钮事件，隐藏弹框，调用一个action函数，该action函数会改变reducer中state的状态 this.props.BombAction(false)}rightClick（) { //右边按钮事件，点击跳转到下一个页面的路由 this.context.router.push(`/nextRoute`) //这里还需要做一件事，点击确定后，首先要清除掉弹出框的true状态，恢复成false，避免在其他页面共用该组件的弹出框还没点击出发事件就已经弹出来了。这一步也可以在BombBox组件内部用componentWillUnmount（)来触发。
this.props.BombAction(false)}render() { const content = 提示语1提示语2//在叫做global（全局）的reducer定义1个state参数BombStatus，表示弹框的状态，true为显示弹框，false为隐藏弹框。默认是false const {BombStatus} = this.props.global return ( { BombStatus ?