0

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

但是，我仍在努力解决如何替换当前状态，该状态在我的 formatCount() 函数中使用。

谁能在下面的示例中告诉我您将如何做到这一点？

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

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

在此处输入图像描述

这是我的上下文

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>
        )
    }
}

这是我的计数器组件

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
        });
    }
}
4

2 回答 2

0

我不太确定您在这里对 CounterContext 的使用，如果我误读了这个问题，非常抱歉。

当您说“状态传递”时-您的意思是您正在尝试更新状态并显示更新后的状态吗？

为此，您需要使用构造函数初始化您的状态：

constructor() {
    super();
    this.state = {
      currentCount: 7
    };
  };

然后，您可以使用 this.setState({}) 更新状态。

于 2018-08-04T14:08:11.137 回答
0

第一步是将要调用的方法（更新状态的方法）移动到CounterProvider类中。然后将该方法传递给状态对象。这样做之后，您现在可以将您的Counter课程更新为如下内容：

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

请注意，我使用methodeName并删除了修改过的CounterContext.Consumer组件以简化操作。

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

于 2018-08-04T16:00:49.367 回答