Как связать один функциональный компонент React с другим?(DevExtreme Chart to PivotGrid) - PullRequest
Новая
       12

Как связать один функциональный компонент React с другим?(DevExtreme Chart to PivotGrid)

1 голос
/ 30 июня 2019

Мы предпочитаем использовать функциональные компоненты реакции без состояния в максимально возможной степени (особенно теперь с React Hooks).

Однако я не могу понять, как добиться эффекта привязки DevExtreme PivotGrid к диаграмме (тактот получает комбинированную операцию).

Как вы можете видеть из их примера: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/ChartIntegration/React/MaterialTealDark/

Они используют компоненты класса с ссылками, а затем делают, когда объединенный компонент класса монтируется: 

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

Мы бы предпочли не идти по этому пути.Есть ли какой-то изящный прием, который можно использовать с новым хуком React useRef () или путем присвоения HTML-идентификаторов документов диаграмме, чтобы мы могли связать два компонента через некоторое время после начальной загрузки?

Мыздесь не пуристы, так что подойдут даже немного некрасивые решения.

1 Ответ

1 голос
/ 30 июня 2019

Я не могу придумать ничего, кроме простого изменения, сделав это способом Hooks, иначе поместите код в ловушку useEffect() и используйте 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>
);
}

Я не уверен на 100%, если вам нужно пропустить ref.current или просто ref. Вы можете попробовать оба пути!

EDIT

Re: использование useRef () из документов React:

Имейте в виду, что useRef не уведомляет вас об изменении своего содержимого. Отключение свойства .current не вызывает повторного рендеринга. Если ты хочешь запускать некоторый код, когда React присоединяет или отключает ссылку на узел DOM, вместо этого вы можете использовать callback ref .

...