React Context（一）：隐式传递数据

一 Context概述

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

二项目结构

三代码

1 theme-context.js

import React from 'react';

// 主题数据

export const themes = {

    gray: {

        background: 'gray',

    },

    gold: {

        background: 'gold',

    },

};

// 创建上下文对象，参数将作为上下文对象的默认值

export const ThemeContext = React.createContext(

    themes.gray // default value

);

2 themed-button.js

import React from 'react';

import { ThemeContext } from './theme-context';

class ThemedButton extends React.Component {

    // props默认是空对象{}。

    // context默认是空对象{}。绑定上下文对象后，创建组件时，会传入上下文对象的值（就近原则）。

    constructor(props,context){

        super(props)

        console.log(arguments)

    }

    render() {

        let props = this.props;

        let theme = this.context;

        return (

            <button

                {...props}

                style={{...theme}} />

        )

    }

}

// 组件类绑定上下文对象后，组件对象的context属性才能使用上下文对象的值（就近原则）。

ThemedButton.contextType = ThemeContext;

export default ThemedButton;

3 app.js

import React, { Fragment } from 'react';

import { ThemeContext, themes } from './theme-context';

import ThemedButton from './themed-button';

// An intermediate component that uses the ThemedButton

// 工具栏组件（中间件）

function Toolbar(props) {

  return (

    <ThemedButton onClick={props.changeTheme}>

      改变上下文对象

    </ThemedButton>

  );

}

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      theme: themes.gray

    };

    this.toggleTheme = () => {

      this.setState(state => ({

        theme: state.theme === themes.gray ? themes.gold : themes.gray

      }));

    }

  }

  render() {

    return (

      <Fragment>

        {/* 在Provider中，使用Provider提供的值 */}

        <ThemeContext.Provider value={this.state.theme}>

          <Toolbar changeTheme={this.toggleTheme} />

        </ThemeContext.Provider>

        {/* 不在Provider中，使用默认值 */}

        <section>

          <ThemedButton />

        </section>

      </Fragment>

    );

  }

}

export default App;

4 index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

四运行效果

1 初始化

2 点击按钮

巴特西

React Context（一）：隐式传递数据

最新文章

热门文章