react传参

react传参

1. 基本传参 props
   
   在子组件中
   this.props.age 获取数据
   传参方法

setAge = v=>this.setState({age:v})

在子组件使用

this.props.setAge(15)}>

2. 上下文传递参数 context
   

   this.props.setAge(15)}>
   所有引用数据的视图都会自动更新

父组件

导入类型检测

import PropTypes from 'prop-types';

定义导出的数据类型

static childContextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }

获取需要传参的数据

getChildContext(){
    return{
        color:this.state.color,
        setColor:v=>this.setState({color:v})}
}

子孙组件

定义上下文数据类型

static contextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func, //  方法类型
}

使用上下文数据

Child组件

使用上下文方法

"this.context.setColor('gold')}>

3. 上下文方式传递
   context
   provider Comsumer

定义上下文组件

import React from 'react'
let {Consumer,Provider} = React.createContext();
//创建一个上下文 结构 Consumer 消费者，Provider 供应商
export {Consumer,Provider}
//导出

父组件

1.导入
import {Provider} from ' ./context'
2.用provider包裹子元素并传递value数据

3.子组件中

导入

import { Consumer} from './context' //导入消费者组件

2. Comsumer中的context获取数据

  {context=>(
    

      

context.setNum(context.num+1)}>{context.num}

) }

3. redux react-redux
   全局数据状态共享
   vuex就是有参考redux的

• 安装
  npm i redux react-redux
• 从 react-redux导入Provider
  import {Provider} from 'react-redux';
• 把根组件替换为

• 在Provider中添加数据仓库
  
• 编写store仓库并导入仓库
• 编写store
  1.redux导入
  2.reducer 初始数据方法
  3.actions 处理数据动作
  4.导出仓库
• 在组件中使用
  1.导入连接
  2.导出组件

export default connect(mapStateToProps,mapDisPatchToProps)(Detail)
mapStateToProps    //组state数据映射为 组件的props
mapDisPatchToProps   //把state中的方法映射诶porps中的方法

react渲染html内容

富文本 编译器

1. 需要插件
   npm i react-draft-wysiwyg draftjs-to-html draft-js -S
2. 导入

import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'

3. 使用

4. 真正的内容
   draftjs(this.state.editorContent)