响应上下文以更改组件答案

【问题标题】：React context to change components响应上下文以更改组件
【发布时间】：2018-07-13 11:12:08
【问题描述】：

我正在构建一个仪表板，在主页上显示多个图表。图表具有额外的过滤器功能（更改最小值最大值）。图表位于带有控制元素的一个组件中，而最小值/最大值的显示位于另一个组件中。我想在图形发生变化时（即切换控制元素后）更改最小值/最大值显示

目前我的组件如下所示：

 graph.js
 var controllElements = (<button onClick={() => this.minmax('min)>..
                         <button onClick={() => this.minmax('max)>)
 return(
  <div>
      {graph}
      {controllElements}
  </div>)


minmaxview.js

return(
<div>{value}
</div>)

我没有在这个项目中使用redux，也无法在这个项目中使用它。

所以我想我会使用 react context api，但没有经验。

最后，它应该是这样的。如果单击按钮 min (graph.js) => 在 minmaxview.js 中更改值

我的问题是现在。我可以为此使用反应上下文吗？如果可能的话，有什么好的例子吗？或者有人有其他解决方案吗？

如果有必要通过会话（可能由于设置状态时 compUpdate 中的无限循环而无法实现）

提前谢谢你。

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

您可以执行下面的操作来利用 React Context API 的 Provider/Consumer 概念。显然，它需要在您的应用程序中进行定制，但它的结构是基于您提供的最小示例，我尽我所能来接近做 Provider/Consumer psuedo react-code。

//graph.js
 export const GraphContext = React.createContext(0);  // asuming default for min/max is 0
 
 var controllElements = (<button onClick={() => this.minmax('min)>..
                         <button onClick={() => this.minmax('max)>)
 return(
  <div>
      {graph}
      <GraphContext.Provider value={this.state.graphValuesObject}>
        {/* Assume minmax function will update graphValuesObject that can be passed around */}
        {controllElements}
      </GraphContext.Provider>
  </div>)


//minmaxview.js
import GraphContext from './graph.js';

return (
  <GraphContext.Consumer>
     {graphValuesObject => <div>{value}</div> }
  </GraphContext.Consumer>
)

更多信息在这里：https://reactjs.org/docs/context.html

【讨论】：