首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于react中的context

关于react中的context

作者头像
_kyle
发布2020-08-24 12:02:29
1K0
发布2020-08-24 12:02:29
举报
文章被收录于专栏:kyle的专栏kyle的专栏

一、context有什么用

当我们使用props进行组件中的数据传递时,假如祖先级组件的数据要传递至孙子级,这种情况的话,我们需要将祖先级别组件的属性通过props传递至父组件属性,再通过父组件的属性中的props传递给孙子级别,这样一层一层传递非常麻烦。而我们使用context,则不需要使用props进行一层一层传递。只需要在祖先元素中使用Provider组件最外层进行包裹,在Provider的value属性中进行传值,然后需要用到的子组件就可以以最外层Consumer组件包裹,在Consumer的Children里的函数参数中进行获取。

二、学习网址

https://react.docschina.org/docs/context.html#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8-context

三、如何使用context

我们最好创建一个js文件例如context.js文件,在文件中如下引入

import {createContext} from 'react'
const {Provider,Consumer} = creaateContext()
export {Provider,Consumer}

然后我们在父组件最外层使用Provider组件进行包裹,将要传递的数据通过Provider组件的value属性传递

render() {
    return (
      <Provider value={{
          onItemClick: this.onItemClick
        }}>
        <div className="App">
          <section className="hero is-info">
            <div className="hero-body">
              <div className="container">
                <h1 className="title">
                  TODO LIST
                </h1>
                <h2 className="subtitle">
                  今天事情今天做,因为不知道还有没有明天
                </h2>
              </div>
            </div>
          </section>
            <TodoList
              todoList={this.state.todoList}
            />
        </div>
      </Provider>
    );
  }

这样子组件则通过Consumer组件进行包裹,注意Consumer的childern必须是一个方法,方法有一个参数,这个参数就是Provider传递过来的value,可以通过参数解构使用

 render() {
    return (
      // 使用Consumer组件来接收Provider传递过来的value
      <Consumer>
        {
          // Consumer的children必须、必须…………是一个方法
          // 方法有一个参数,就是Provider传递过来的value
          ({onItemClick}) => {
            return (
              <li
                onClick={() => {
                  onItemClick(this.props.id)
                }}
                className={classNames({'has-text-danger': this.props.isCompleted})}
                style={this.props.isCompleted ? {textDecoration: 'line-through'} : {}}
              >{this.props.text}</li>
            )
          }
        }
      </Consumer>
    )
  }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、context有什么用
  • 二、学习网址
  • 三、如何使用context
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档