React -- Redux

本节主题：

1. 数据类型验证
2. 内容分发
3. 如果后台给的数据是富文本，如何正常渲染到页面上？？
   4.再谈组件通讯

一、数据类型验证

 1.先安装第三方类型检查的包

     npm install prop-types --save

 2.引入第三方检查的包，并在要接收的组件中，添加类型检查

    import PropTypes from 'prop-types';

      //类型验证
  
        static propTypes={
    
            title:PropTypes.oneOfType([
                PropTypes.string,
                PropTypes.number,
                PropTypes.object
            ])
    
        }

具体官方地址： https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

二、内容分发:即可以往组件传入jsx，在子组件用 this.props.children接收

三、 如果后台给的数据是富文本，如何正常渲染到页面上（即：渲染带标签的数据）

相当于vue中的v-html

  例如： <div dangerouslySetInnerHTML={{ __html:this.props.title }}></div>

四、再谈组件通讯

1.利用context实现兄弟之间通讯

  第一种：React旧版写法：http://react.css88.com/docs/legacy-context.html

第一步 在要祖先组件中设置：

 //表示要传递的数据类型，必须添加

      static childContextTypes={

        zhuanye:PropTypes.string

    }

 constructor(props) {
    super(props);

    this.state={
        zhuanye:"前端开发111"
  }



  //只要添加此部，子级才能拿到这里的数据

  getChildContext() {
    return {zhuanye: this.state.zhuanye};
  }

第二步：在要获取祖先数据的子组件中获取：

提前 import PropTypes from 'prop-types';

      static contextTypes={
            zhuanye:PropTypes.string
        }

    最终在render模板中通过 { this.context.zhuanye }来拿到数据

第二种： React新版写法：和redux写法类似

  涉及的知识点：  
    React.createContext
    Provider
    Consumer

第一步：设置一个公共数据：例如：data.js
第二步：在祖 仙组件中提供数据

     {/* Provider提供数据 */}
         <contextObj.Provider value={ info.person }>
                 <HeaderCom title={this.state.name}> </HeaderCom>
           </contextObj.Provider>

第三步：在要使用数据组件中引入

    import {contextObj} from '../pages/home/data'
    并添加

如下代码：

     <contextObj.Consumer>

            {
                    item=>( <div>
                              <div>姓名：{ item.name }</div>
                              <div>年龄：{ item.age }</div>
                              <div>地址：{ item.address }</div>
                        
                           </div>
                          ) 
                }
                
  </contextObj.Consumer>

箭头函数 ()=> { ...... } 主()=>(.....)的区别

  1.第一个箭头函数必须加return 才能返回数据
  2.第二个箭头函数是自动带return返回数据

2.利用redux实现兄弟之间通讯

预习：redux 中文文档 http://cn.redux.js.org/