React组件之间的传值 + redux公用数据的使用

1.父子之间的传值

    父传子

          父： 通过自定义属性进行传值-如：toson =' '

import React, { Component } from 'react';
import Son from './son'

export default class father extends Component {
    render() {
        return (
            <div>
                <Son toson="给儿子的"></Son>
            </div>
        )
    }
}

          子：通过this.props.属性名可以进行直接使用

import React, { Component } from 'react'

export default class son extends Component {
    render() {
        return (
            <div>
                {this.props.toson}
            </div>
        )
    }
}

 

子传父

    父

import React, { Component } from 'react';
import Son from './son'

export default class father extends Component {
    getFromSon = (msg)=>{
        //参数来自于儿子的数据 getMeg == getFromSon
        console.log(msg)
    }
    render() {
        return (
            <div>
                <Son getMeg ={this.getFromSon}></Son>
            </div>
        )
    }
}

     儿：

import React, { Component } from 'react'


export default class son extends Component {
    toFather=()=>{
        this.props.getMeg('给父亲的数据')
    }
    render() {
        return (
            <div>
                <button onClick={this.toFather}>点击传递数据给父亲</button>
            </div>
        )
    }
}

2.兄弟之间传值

   根据父亲作为中间商，将数据定义在父亲身上

  父：

import React, { Component } from 'react';
import Sonone from './Sonone'
import Sontwo from './Sontwo'

export default class father extends Component {
    state={
        name:'xx'
    }
    changeName =( name )=>{
        this.setState({
            name
        })
    }
    render() {
        return (
            <div>
                <Sonone name ={this.state.name} changeName= {this.changeName}></Sonone>
                <Sontwo name ={this.state.name}></Sontwo>
            </div>
        )
    }
}

儿

import React, { Component } from 'react'


export default class sonone extends Component {
    change= () =>{
        this.props.changeName('修改的数据')
    }
    render() {
        return (
            <div>
                <button onClick={this.change}>修改数据</button>
            </div>
        )
    }
}

 

3.父亲获取儿子的方法和属性

 利用ref进行获取fu

父：

import React, { Component } from 'react';
import Son from './son'

export default class father extends Component {
    getFromSon = (msg)=>{
      //从son中获取方法
      this.son.showson();
      //从儿子中获取state中的数据
      let a = this.son.state.name
    }
    render() {
        return (
            <div>
                <Son  onRef={(ref) => this.son= ref}></Son>
            </div>
        )
    }
}

儿：

import React, { Component } from 'react'


export default class son extends Component {
  state = {
     name: 'son'
  }

  componentDidMount() {
    this.props.onRef(this)
   }

    showson=()=>{
        console.log(111)
    }
    render() {
        return (
            <div>
                <button>点击传递数据给父亲</button>
            </div>
        )
    }
}

 

3.redux

    了解redux的一些相关概念

    (1)Store: 数据仓库，存放组件公共数据 - 创建 const store = createStore(function(){})

  （2)Action: 通知对象，修改数据的唯一方式,是一个对象，里面一定有一个固定属性type

    (3)发送通知对象： store.dispath(aciton)

    (4)reducer： 计算者，是一个函数，返回的新的数据会进行覆盖原有state的数据

如何使用redux????

    1.下载安装依赖： yarn add redux react-redux

    2.src下面进行创建store.js

         store.js - 创建仓库，定义action，计算规则reducer

       //整个执行 - 创建仓库，会执行reducer进行初始化数据，若reducer中无数据，则state默认为undefined
       //当触发了action，则会执行reducer进行修改掉数据

import { createStore } from 'redux'

//创建数据仓库
const store = createStore(reducer);

//定义action - 定义为方法，有助改变的使用接收外部参数，一定有属性type
export const changeName = (name) => {
    return {
        type: 'changeName',
        name
    }
}

//定义action
export const changeAge = {
    type: 'changeAge',
    age:22
}

//进行触发action - 让reducer进行执行
//store.dispatch(changeAge)


//定义计算方式 ，有参数state,age
//state中定义了初始化的数据 
//函数return的数据会覆盖掉state中的数据，所以最好是返回对象，
function reducer(state = {
    name: '张三',
    age: 18
}, action) {
    switch (action.type) {
        case 'changeName':
            return {
                ...state,
                name: action.name
            }
        default:
            return state;
    }
}


export default store

     3.有层级关系，在最顶层关系中。将数据注入（因为数据流，从上往下的，最顶层有了，其他层也可以使用）

         最高层级 container.js

import React, { Component } from 'react'
import GradMa from './GradMa'
//Provider 进行注入数据
import { Provider } from 'react-redux'
import store from '../store'

export default class container extends Component {
    render() {
        //往最高层数据进行注入数据- 则GradMa和他的儿子孙子都可以使用store中的数据
        return (
            <Provider store ={store}>
                <GradMa></GradMa>
            </Provider>
        )
    }
}

    4.任意GradMa的子组件和孙组件以及自身进行使用store中的数据并修改

    如：child.js（GradMa的孙组件）

import React, { Component } from 'react'
import { connect } from 'react-redux'
//引入action
import {changeName} from '../store'

class Child extends Component {
    changeName = ()=>{
        //点击修改孩子的名字 - 触发action
       this.props.dispatch(changeName('李四'))
    }
    
    render() {
        return (
            <div>
                我是孩子
                孩子的名字：{this.props.name}，年纪是：{this.props.age}
                <button onClick={this.changeName}>点击修改孩子名字</button>
            </div>
        )
    }
}

//进行过滤数据，将store中的数据过滤，拿出child需要的数据
//state就是store中的数据
//将数据放在props中，组件通过{this.porps.xx}进行使用
const mapStateToProps = (state) => {
    return {
        name: state.name,
        age: state.age
    }
}
export default connect(mapStateToProps)(Child)