关于react中的context

一、context有什么用

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

二、学习网址

https://react.docschina.org/docs/context.html#何时使用-context

三、如何使用context

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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，可以通过参数解构使用

代码语言：javascript复制

 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>
    )
  }

provider

0 人点赞