React - 组件通信

一.利用props/函数传值

father.js

class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            info: [1, 2, 4, 5, 6, 6, 7]
        }
    }
    ChangeShow = (props) => {
        console.log(props);// 可以获取child当中传来的参数
        this.setState({
            info: [] // 当前操作只是将父组件当中state 数组info清空
        })
    }
    render() {
        const { info } = this.state;
        return (  
            //info 输入state当中的info  onchange获取到子组件定义的方法
            <div>123<Child onChange={this.ChangeShow} info={info} /></div>
        )
    }
}

export default Test;

child.js

class ChildTest extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    handleChange = () => {
        this.props.onChange(123); // 在这就是向父组件changeShow中的props参数
    }
    render() {
        const { info } = this.props;
        return (
            <div>
                <div>child<i>{this.context.color}</i></div>
                <div onClick={this.handleChange}>点击</div>
                {info.map((item, index) => (
                    <div key={index}>{item}</div>
                ))}
            </div>
        )
    }
}

export default ChildTest;

二.利用Redux进行通信

redux/index.js

const  VIP_INFO = 'VIP_INFO';

const initState = {
  flagAvatar: false//全局控制显示修改头像弹框
}

// reducer
export function personalCenter(state = initState, action) {
  switch (action.type) {
     case AVATAR_FLAG:
        return { ...state, flagAvatar: action.flagAvatar }
     default:
        return state
  }
}
// actions creater
function avatarFlag(data) {
  return { type: AVATAR_FLAG, flagAvatar: data }
}
// 暴露方法
export function changeAvatarFlag(param) {
  return dispatch => {
     dispatch(avatarFlag(param))
  }
}

此系列文章,做本人查漏补缺用.