javascript - react 上下文以更改组件

Question

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

目前我的组件是这样的:

 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 中的值

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

如果需要通过 session (由于设置状态时 compUpdate 中的无限循环，可能不可能)

提前谢谢你。

Answer 1

您可以执行如下操作以利用 React Context API 的提供者/消费者概念。显然，它需要在您的应用程序中根据其结构进行定制，但基于您提供的最小示例，我尽力接近提供者/消费者伪 react 代码。

//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