如何将一个 React 功能组件绑定到另一个？（DevExtreme 图表到 PivotGrid）

Question

我们更喜欢尽可能多地使用函数式无状态 React 组件（尤其是现在使用 React Hooks）。

但是，我想不通如何实现将DevExtreme PivotGrid绑定到Chart的效果（这样就得到了组合操作）。

从他们的示例中可以看出：https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/ChartIntegration/React/MaterialTealDark/

他们将 Class 组件与 ref 一起使用，然后在组合 Class 组件安装时执行：

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

我们宁愿不走那条路。是否有一些巧妙的技巧可以与新的 React useRef() 挂钩一起使用，或者通过为图表提供 HTML 文档 ID，以便我们可以在初始加载后的某个时间绑定两个组件？

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

Answer 1

除了以 Hooks 方式进行简单更改外，我想不出任何其他方法，也就是将代码放在 useEffect() 钩子中并使用 useRef() 绑定 refs:

// 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>
);
}

我不能 100% 确定您是否需要通过 ref.current 或只是 ref 本身。两种方法都可以试试！

编辑

回复：使用 useRef()，来自 React 文档：

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

如何将一个 React 功能组件绑定到另一个？（DevExtreme 图表到 PivotGrid）

How to bind one React Functional Component to another? (DevExtreme Chart to PivotGrid)

reactjs

devextreme

如何将一个 React 功能组件绑定到另一个？ （DevExtreme 图表到 PivotGrid）

How to bind one React Functional Component to another? (DevExtreme Chart to PivotGrid)

reactjs

devextreme

如何将一个 React 功能组件绑定到另一个？（DevExtreme 图表到 PivotGrid）