react中使用decorator 封装context

2020-03-27

react中使用decorator 封装context

在传统的react context中，子组件使用context十分繁琐，如果需要使用context的子组件多的话

每个组件都需要写consumer，所有如果能使用decorator的话，就会方便很多

对比一下下:

方案1: 传统的context

每一个需要使用context的组件都需要写consumer

 

import React from 'react';

import MyContext from '../context.js';

class Son extends React.Component {

  render() {

    return (

      // 每一个需要使用context的组件 你都需要用consumer包装一下

      // 如果有一百个呢？？？？ 而且写法复杂很不友好！

      <MyContext.Consumer>

        {value => (

          <div>

            <div>{value.name}</div>

            <div>{value.age}</div>

          </div>

        )}

      </MyContext.Consumer>

    )

  }

}

export default Son;

方案2: 牛p的decorator

哪个组件要用 装饰一下即可

import React from 'react';

import MyContext from '../context.js';

function withUser(Component) { // 定义一个方法，这个方法就是decorator装饰器

  return class extends React.Component{ // 方法返回了一个组件 是将原组件装饰之后的组件

    render() {

      return (

        // 装饰器统一将原组件用Consumer包装起来 并将context的value值存在组件props的指定key中，这里是user

        <MyContext.Consumer>

          {value => <Component user={value} {...this.props} />}

        </MyContext.Consumer>

      )

    }

  }

}

export default withUser;

 

import React from 'react';

import withUser from './decorator';

@withUser // 装饰器的参数默认就是下面的组件了

class Son extends React.Component {

  render() {

    return (

      <div>

        {/* 经过 装饰器装饰过的组件中 props中已经有了context的值了， key是user */}

        <div>{this.props.user.name}</div>

        <div>{this.props.user.age}</div>

      </div>

    )

  }

}

export default Son;