ReactJs 上下文 - 如何用传入的状态替换当前组件状态 [英] ReactJs context - how to replace the current component state with the state passed in

问题描述

我正在尝试了解 ReactJs 上下文，并最终在显示状态名称和 countNumber 方面取得了一些进展.

然而，我仍在努力寻找如何替换当前状态，它在我的 formatCount() 函数中使用.

谁能告诉我在下面的示例中您将如何执行此操作?

我想在我的上下文中使用这个数字，例如5 在方法中，formatCount()，所以它类似于

 formatCount() {const currentCount = {c.state.currentCount};返回 currentCount === 0 ?零":currentCount；}

这是我的背景

import React, { Component } from "react";export const CounterContext = React.createContext();导出默认类 CounterProvider 扩展组件 {状态 = {状态:{名称:'鲍勃'，当前计数:5}，}使成为() {返回 (<CounterContext.Provider value={ this.state }>{this.props.children}</CounterContext.Provider>)}}

这是我的计数器组件

import React, { Component } from "react";从反应路由器"导入 { RouteComponentProps };import { CounterContext } from "../contexts/context.js";导出类计数器扩展组件{状态 = { currentCount: 7 }使成为() {return 
<CounterContext.Consumer>{c =><div className="m-2"><p>我的名字是 {c.state.name} - {c.state.currentCount}</p><span className={this.getBadgeClasses()}>{this.formatCount()}</span><button className="btn btn btn-primary btn-sm m-2" onClick={() =>{ this.incrementCounter() }}>Increment</button><button className="btn btn-danger btn-sm m-2" onClick={() =>{ this.incrementCounter() }}>删除</button>
}</CounterContext.Consumer>

;}格式计数(){const currentCount = this.state.currentCount;返回 currentCount === 0 ?零":currentCount；}getBadgeClasses() {let classes = "徽章 m-2 徽章-";类 += this.state.currentCount === 0 ?警告":主要"；返回类；}增量计数器(){this.setState({currentCount: this.state.currentCount + 1});}}

解决方案

第一步是将要调用的方法(更新状态的方法)移至 CounterProvider 类.然后将方法传递给状态对象.这样做之后，您现在可以将 Counter 类更新为如下所示:

{(c, methodName) =><div className="m-2">我的名字是{c.state.name}<button onClick={methodName}></button>

}</CounterContext.Consumer>

请注意，为了简化事情，我使用了 methodeName 并删除了修改后的 CounterContext.Consumer 组件.

您可以阅读有关 Context API 的更多信息:https://reactjs.org/docs/context.html

I am trying to get my head around ReactJs context, and have finally made some progress to display the state name and countNumber.

However I am still struggling to work out how to replace the current state, which is used in my formatCount() function.

Can anyone let me know how you would do this in my example below?

I would like to use the number in my context e.g. 5 in the method, formatCount(), so it would be something like

    formatCount() {
        const currentCount = {c.state.currentCount};
        return currentCount === 0 ? "Zero" : currentCount;
    }

Here is my context

import React, { Component } from "react";
export const CounterContext = React.createContext();

export default class CounterProvider extends Component {
    state = {
        state: { name: 'bob', currentCount: 5 },
    }
    render() {
        return (
            <CounterContext.Provider value={ this.state }>
                {this.props.children}
            </CounterContext.Provider>
        )
    }
}

Here is my counter component

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { CounterContext } from "../contexts/context.js";

export class Counter extends Component {
    state = { currentCount: 7 }

    render() {
        return <div className="m-2">
            <CounterContext.Consumer>
                {c =>
                    <div className="m-2">
                        <p>My name is {c.state.name} - {c.state.currentCount}</p>
                        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                        <button className="btn btn btn-primary btn-sm m-2" onClick={() => { this.incrementCounter() }}>Increment</button>
                        <button className="btn btn-danger btn-sm m-2" onClick={() => { this.incrementCounter() }}>Delete</button>
                    </div>
                }
            </CounterContext.Consumer>
        </div>;
    }

    formatCount() {
        const currentCount = this.state.currentCount;
        return currentCount === 0 ? "Zero" : currentCount;
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.currentCount === 0 ? "warning" : "primary";
        return classes;
    }

    incrementCounter() {
        this.setState({
            currentCount: this.state.currentCount + 1
        });
    }
}

解决方案

The first step is to move the method you want to call (the one that updates the state) to the CounterProvider class. Then pass the method into the state object. After doing that you can now update your Counter class to something like so:

<CounterContext.Consumer>
   {(c, methodName) =>
     <div className="m-2">
         My name is {c.state.name}
         <button onClick={methodName}></button>
     </div>
   }
</CounterContext.Consumer>

Please note that I have used methodeName and removed modified the CounterContext.Consumer component in order to simplify things.

You can read more about the Context API: https://reactjs.org/docs/context.html

这篇关于ReactJs 上下文 - 如何用传入的状态替换当前组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！