@abw/react-context-generator 中文文档教程

Question

react-context-generator

Introduction

这是一个小而简单的模块，提供了一些语法糖 简化 React Context 在 React 中维护状态的使用 应用程序。

说真的，它小得令人尴尬。 我们说的是 20 行 代码左右。

如果你还不熟悉 React Context 那么你应该从 阅读 React Context 文档：

Installation

https://reactjs.org/docs/context.html 使用 npm 或 yarn

Either:

$ npm install --save @abw/react-context-generator

Or:

$ yarn add @abw/react-context-generator

Wrapping a Component that Maintains State

这是一个维护某些状态的组件的简单示例 并提供操纵该状态的方法。

// Counter.js
import React from "react";
import Generator from "@abw/react-context-generator";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: this.props.initialCount || 0
    };
    this.actions = {
      inc: this.increment.bind(this),
      dec: this.decrement.bind(this),
    };
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
  render() {
    return this.props.render({
      ...this.state,
      ...this.actions,
    });
  }
}

export default Generator(Counter);

它在初始设置为 0 或自定义值的状态中存储 count 值 由 initialCount 属性提供。 它有 increment() 和 decrement() 方法 分别从计数中加或减一。

在 constructor() 方法中我们还定义了 this.actions 来存储这些的版本 绑定到 this 的方法，允许它们作为函数从任何地方调用 在我们的代码中。 我在这里给出了较短的名称 - inc 和 dec 但这完全是 随意的。 原来的名字也能达到目的。

到目前为止，这都是相当标准的 Javascript/React 代码。 有趣的地方是 render() 方法。 我们在这里所做的就是调用传递的 render() 函数 作为一个属性 - this.props.render() - 并向它传递一个包含这些东西的对象 我们想与其他组件共享。

在这种情况下，我们将传递状态中的所有内容（仅在这个简单示例中 包含 count) 和我们定义的操作状态的操作（inc 和 dec）。

最后一行代码调用从中导入的 Generator() 函数 @abw/react-context-generator 将 Counter 组件作为参数传递。 这就是 Counter.js 模块导出的默认值。

export default Generator(Counter);

Using the Context Provider

现在，当我们导入这个模块时，我们会得到一个包含两个条目的对象：一个 Provider 和一个 Consumer。

Provider 旨在封装可能需要访问状态的所有组件。 它通常添加在应用程序“外部”附近的某个位置。

// MyApp.js
import React from "react";
import Counter from "./Counter";

export default props => <div id="myapp">
  <h1>Welcome to My Counting App!</h1>
  <Counter.Provider>
    ...the rest of your app goes here...
  </Counter.Provider>
</div>

如果需要，您可以将自定义属性传递给您的 Provider。 他们将被传递给 Counter 组件，例如，

export default props => <div id="myapp">
  <h1>Welcome to My Counting App that Starts at 100!</h1>
  <Counter.Provider initialCount={100}>
    ...the rest of your app goes here...
  </Counter.Provider>
</div>

Using the Context Consumer

当您需要从应用程序深处的某处访问 Counter 提供的状态时，您 只需要将它包装在 Counter.Consumer 函数中。 Counter 的所有项目 作为上下文的模块共享将作为属性传递到您的组件中。

// Controls.js
import React from "react";
import Counter from "./Counter";

const Controls = ({count, inc, dec}) => <div>
  <p>The current count is {count}</p>
  <button onClick={inc}>Increment</button>
  <button onClick={dec}>Decrement</button>
</div>

export default Counter.Consumer(Controls)

这里的所有都是它的。 甜蜜而简单！