Reactjs 如何将一个功能组件绑定到另一个？（将图表导出到数据透视网格）

我们更喜欢尽可能多地使用功能性无状态react组件（尤其是现在使用react钩子）

但是，我不知道如何实现将DevExtreme数据透视网格绑定到图表的效果（这样就可以得到一个组合操作）

从他们的例子中可以看出：

它们将类组件与ref一起使用，然后在组合类组件安装时执行以下操作：

  componentDidMount() {
    this._pivotGrid.bindChart(this._chart, {
      dataFieldsDisplayMode: 'splitPanes',
      alternateDataFields: false
    });
  }

我们宁愿不走那条路。在新的React useRef（）钩子中是否有一些巧妙的技巧可以使用，或者为图表提供HTML文档id，以便我们可以在初始加载后的某个时间绑定这两个组件

---

我们在这里不是纯粹主义者，所以即使是稍微丑陋的解决方案也可以。

我想不出任何东西，只想简单地改变一下使用钩子的方式，即将代码放入

useffect（）

钩子中，并使用

useRef（）

绑定引用：

// import useEffect and useRef hook from 'react', 
import React, { useEffect, useRef() } from 'react'    

function App() {
  // initialize the ref variables with null as the initial value,
  const pivotGrid = useRef(null);
  const chart = useRef(null);

  // useEffect runs after the layout paint...
  useEffect(() => {
      // do the binding on the references,
      pivotGrid.current.bindChart(chart.current, {
         dataFieldsDisplayMode: 'splitPanes',
         alternateDataFields: false
      });
  }
  ,
  // we pass an empty array to only run once after the component mount,
  [])

  // pass the refs variables to the components.
  return (
  <React.Fragment>
    <Chart ref={chart}>
      <Size height={320} />
      <Tooltip enabled={true} customizeTooltip={customizeTooltip} />
      <CommonSeriesSettings type={'bar'} />
      <AdaptiveLayout width={450} />
    </Chart>

    <PivotGrid
      id={'pivotgrid'}
      dataSource={dataSource}
      allowSortingBySummary={true}
      allowFiltering={true}
      showBorders={true}
      showColumnTotals={false}
      showColumnGrandTotals={false}
      showRowTotals={false}
      showRowGrandTotals={false}
      ref={pivotGrid}
    >
      <FieldChooser enabled={true} height={400} />
    </PivotGrid>
  </React.Fragment>
);
}

//从“react”导入useffect和useRef钩子，
从“React”导入React，{useffect，useRef（）}
函数App（）{
//以null作为初始值初始化ref变量，
const pivotGrid=useRef（null）；
const chart=useRef（空）；
//useEffect在布局绘制之后运行。。。
useffect（（）=>{
//对引用进行绑定，
pivotGrid.current.bindChart（chart.current{
dataFieldsDisplayMode:“拆分窗格”，
alternateDataFields:false
});
}
,
//我们传递一个空数组，以便在组件装载后只运行一次，
[])
//将refs变量传递给组件。
返回(
相反

我觉得你已经知道该走哪条路了。为什么不使用useRef（）钩子并尝试一下呢？我用useRef（）尝试了一些想法，但我必须承认，我一定没有完全掌握如何将它用于这种风格的usageuseEffect（（）=>{u pivotGrid.current.instance.bindChart（_chart.current.instance，{…这就是解决问题的方法吗？告诉我这个答案是否有用，我会更新它。在一整天的会议中。希望明天报告。@P Fuster，当我将其更改为current.instance时。是的，它起了作用。但您可能想看看这两篇关于此方法的注意事项的文章（与我的用例无关）：（1）（2）