0

有许多帖子解决了这个问题的一些变体——其中最流行的建议是重新设计父子层次结构，以符合具有单向数据流的反应原则。我目前正在使用一个简单的应用程序，该应用程序旨在使用 react-vis 制作一些 webplots，这是一个不再维护的相对较大的绘图包。

我的问题是图例组件和绘图组件是分开的，理想情况下，人们想访问绘图组件内的一些变量来设置图例的基本参数。我已经根据 react-vis 文档中的一个示例找到了一个简单的组件。对于此示例，我想访问HexbinSeries中的一个变量，然后通过控制台将其登录到主应用程序中。

import React, {useEffect} from 'react';
import {XYPlot, XAxis, YAxis, HexbinSeries} from 'react-vis'

  
export const EasyPlot = () => {

  const DATA = [
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 1.8, "waiting": 54},
    {"eruptions": 4.533, "waiting": 85}
  ];

  useEffect(() => {
    //console.log('var from HexbinSeries logged here')
  })

  return (
    <div>
      <XYPlot
        width={400}
        getX={d => d.waiting}
        getY={d => d.eruptions}
        height={400}
      >
        <HexbinSeries
          colorRange={['orange', 'cyan']}
          radius={10}
          data={DATA}
        />
        <XAxis />
        <YAxis />
      </XYPlot>
    </div>
  );
};

该图应该是一个六边形直方图，其中一个六边形的计数为 3，而其他六边形的计数为 1（来自数据）。实际的 HexbinSeries 组件使用 d3-hexbin 来构造绘图的路径，并且可以很容易地从这个构造中推导出每个六边形的总计数。

天真的解决方案是在主应用程序上重现此过程（在我的数据集上运行 d3-hexbin），并从那里确定计数。但理想情况下，我希望避免每次渲染都在大型数据集上重新运行 d3-hexbin 两次，特别是如果该图是交互式的并且我们需要使用计数更新图例。

第二个天真的解决方案是拥有一个全局变量或一些 DOM 元素，我将在 HexbinSeries.js 中手动访问以进行更改。但这显然是一种一次性解决方案。

编辑：

另一种方法是让父级将 setState 作为道具传递给 HexbinSeries。但是，HexbinSeries的编写方式超出了我的理解，目前它似乎没有构造函数。

4

0 回答 0