React手稿 - Context

qingshanli1988 發布于2019-08-26 13:23 / 2583人閱讀

摘要：提供了除之外的傳參數的方式。是全局跨組件傳遞數據的。在線示例推薦閱讀手稿

Context

Context提供了除props之外的傳參數的方式。

Context是全局跨組件傳遞數據的。

API

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

Provider

Consumer


  {value => /* render something based on the context value */}

Example ThemeContext.js

import React from "react";

export const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};

export default React.createContext(
  themes.dark // default value
);

ThemedButton.jsx

import React from "react";
import ThemeContext, {themes} from "./ThemeContext";

export default ({children}) => {
  const styles = {
            color: themes[theme].foreground,
            backgroundColor: themes[theme].background
          };
  return (
    
      {theme => {
        return (
          
        )
      }}
    
  );
}

App.js

import React, {PureComponent} from "react";
import ThemeContext from "./ThemeContext";
import ThemeButton from "./ThemedButton";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {theme: "dark"};
  }

  render() {
    return (
      
        
           {
            this.setState({theme: this.state.theme === "dark" ? "light" : "dark"})
          }}>Themed Button
        
      
    );
  }
}

在線示例

推薦閱讀《React 手稿》

GPU云服務器云服務器手稿 Context 獲取context stacking-context

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108715.html

React手稿之State Hooks of Hooks

摘要：官方也陳述，接下來的的工作會投入到中。從目前官方的文檔可以看出，從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發布的版本中有該功能，想體驗該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。官方也陳述，接下來的90%的工作會投入到React ...

DC_er 2019-08-23 13:53 評論0 收藏0
React手稿之 React-Redux

摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

Freelander 2019-08-23 12:57 評論0 收藏0
React 手稿 - Component state

摘要：實例在線實例定義寫在函數中，是一個對象。一般情況下需要指定默認值，預防拋使用在組件中通過訪問組件對象屬性的方式。把這種組件也稱為非受控性組件。通過提供了方法，來實現的修改。回調非控組件在線實例受控組件在線實例推薦閱讀手稿 Component state 實例： import React, { PureComponent } from react; export default cla...

dcr309duan 2019-08-23 12:55 評論0 收藏0
React手稿之 React-Saga

摘要：相當于一個放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發一個時，立即執行。也就是在與之間做一個事情，比如異步獲取數據等。使用了中的功能，避免了像的回調地獄。把放入中最后再實現相就的即可在線示例推薦閱讀手稿 Redux-Saga redux-saga 是一個用于管理應用程序副作用（例如異步獲取數據，訪問瀏覽器緩存等）的javascript庫，它的目標是讓副作用管理更容易，執行更...

notebin 2019-08-23 13:03 評論0 收藏0
React手稿之類型檢查

摘要：類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用或者來實現。示例以上內容在實現一個通用組件時非常有用。類型檢查和參數默認值一起使用，保證組件的正常運行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用Flow或者TypeScript來實現。 React提供了PropTypes來檢查類型。示例： imp...

tomorrowwu 2019-08-26 12:24 評論0 收藏0