1

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

目前我的组件如下所示：

 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 中的无限循环而无法实现）

先感谢您。

4

1 回答 1

1

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

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

于 2018-07-13T13:46:00.867 回答