使用 React Context 更改 progressBar 的状态

Question

我正在尝试在这个小例子上实现 React Context。我在其中一个组件上有一个进度条，在另一个组件上有一个切换上下文。

我已经实现了上下文，但是代码没有给出错误，它不起作用。

我正在尝试从具有切换 ProgressBar 按钮的 Componenet3 更改 Componenet1 中的进度条状态。

link中的例子https://codesandbox.io/s/gallant-grass-pgf2b?file=/src/Component1.js

谢谢

Answer 1

您可以从：

开始

const PercentContext = React.createContext({
  percent: 0,
  setValue: (val) => {}
});

export default PercentContext;

在 App 中提供您的“上下文”：

const [percent, setPercent] = React.useState(7);
  return (
    <PercentContext.Provider value={{ percent, setValue: setPercent }}>
      <div className="App">....

然后在你的内部组件中消耗：

<PercentContext.Consumer>
        {({ percent, setValue }) => (
          ....

你可以在 React 上了解更多这篇文章 docs

这里有一个解决方案：https://codesandbox.io/s/jovial-knuth-wcugn

使用 React Context 更改 progressBar 的状态

Change the state of progressBar using React Context

javascript

frontend

web-frontend

reactjs