• 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 点击按钮

  • 相关阅读:
    VR虚拟现实眼镜那些事
    C#使用MysqlBackup.Net 备份MySQL数据库
    AgileConfig服务端搭建
    IE浏览器,各版本的请求头信息
    搜索算法
    一个完整的信号采集系统项目开发流程
    Linux内核模块简介
    搭建wordpress开发环境
    AbstractRoutingDataSource+AOP+JNDI实现spring动态数据源
    Linux 挂载磁盘记录
  • 原文地址:https://www.cnblogs.com/sea-breeze/p/10323031.html
Copyright © 2020-2023  润新知