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

发布时间：2020-12-15 20:35:27 所属栏目：百科来源：网络整理

导读：? 一 Context概述 ? Context provides a way to pass data through the component tree without having to pass props down manually at every level. ? 二项目结构 ? ? 三代码 ? 1 theme-context.js ? import React from ‘react‘ ; // 主题数据 export

一 Context概述

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

二项目结构

三代码

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 {
    render() {
        let props = this.props;
        let theme = this.context;
        return (
            <button
                {...props}
                style={{...theme}} />
        )
    }
}

// 给ThemedButton类绑定上下文对象：ThemedButton类的对象的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 点击按钮

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!