react传参

react传参

1. 基本传参 props
   <child age={this.state.age}>
   在子组件中
   this.props.age 获取数据
   传参方法

setAge = v=>this.setState({age:v})
<child age={this.state.age} setAge={this.setAge. bind(this)}>

在子组件使用
<h3 onClick= {()=>this.props.setAge(15)}>

2. 上下文传递参数 context
   <h3 onClick= {()=>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, //  方法类型
}

使用上下文数据

<h3 style={{color:this.context.cor}}>Child组件</h3>

使用上下文方法

"<button onClick={0=>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数据

<Provider value={{
  num:this.state.num,
   setNum:this.setNum
}}>

3.子组件中

导入

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

2. Comsumer中的context获取数据

<Consumer>
  {context=>(
    <div><h3>
      <button onClick={()=>context.setNum(context.num+1)}>{context.num}</button>
    </h3></div>)
  }
</Consumer> 

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

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

<Provider>
     <App/>
</Provider>

• 在Provider中添加数据仓库
  <Provider store={store}>
• 编写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内容

<div dangerouslySetInnerHTML={{__html:item.msg}}></div>

富文本 编译器

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. 使用

<Editor
    editorState={this.state.editorState}
    // 绑定编辑状态
    onContentStateChange={this.onContentStateChange}
    // 当内容发生改变时候
    onEditorStateChange={this.onEditorStateChange}
    // 当编辑器状态发生改变的时候 
></Editor>

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