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上下文api，但是没有经验。

最后，它应该看起来像这样。如果单击按钮min（graph.js）=>更改minmaxview.js中的值

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

如果需要通过会话进行（可能由于设置状态时compUpdate中存在无限循环而无法实现）

谢谢。

Answer 1

您将执行以下操作来利用React Context API的提供者/消费者概念。显然，需要在您的应用程序中对其进行定制，但是它是结构化的，但是基于您提供的最小示例，我尽力接近以执行提供者/消费者伪代码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

反应上下文以更改组件

1 个答案: