调整窗口大小时如何在 React 中缩小表格中的增长图表答案

【问题标题】：How to have growing chart in table shrink back down in React when resizing window调整窗口大小时如何在 React 中缩小表格中的增长图表
【发布时间】：2019-04-18 06:16:08
【问题描述】：

我正在使用可视化库React-vis，并发现当使用FlexibleXYPlot 组件时，虽然折线图或图表可以正常收缩和增长，但一旦将其放置在宽度为 40% 的表格单元格中它所在的行，当我调整窗口大小时，它会增长但不会缩小。我想知道如何获得在表格中的表格之外的收缩行为。代码在这里，演示了两个上下文：https://codesandbox.io/s/wk6kpxl3jk

下面不是我的图表本身，但显示了我得到并希望避免的相同行为。

【问题讨论】：

标签： css reactjs react-vis

【解决方案1】：

尝试使用vw 而不是%。像这样

.class {
    width: 100vw
}

您可能需要使用小于 100 的数字

【讨论】：

【解决方案2】：

我用

import ReactResizeDetector from 'react-resize-detector';

...

const handleResize = () => {
   const element = window.document.querySelector('.mainWrapper');
   this.setState({ width: element.offsetWidth });
}

...

<ReactResizeDetector handleWidth handleHeight onResize={handleResize} />

然后将宽度作为道具添加到图表组件中。

【讨论】：

【解决方案3】：

也许这是一个更好的解决方案。库中有实际的响应式支持：

import {
  FlexibleXYPlot,
  FlexibleWidthXYPlot,
  FlexibleHeightXYPlot
} from 'react-vis';

FlexibleWidthXYPlot 修改了 XYPlot 使其不再需要宽度，因为它会占用其容器 div 中的所有内容。同样，FlexibleHeightXYPlot 修改了 XYPlot，因此不再需要高度，并且它的高度将是其容器 div 的高度。最后，FlexibleXYPlot 修改了 XYPlot，使其不再需要宽度和高度，它的尺寸将是其容器的尺寸。

这些组件完全可以用作 XYPlot：

<FlexibleWidthXYPlot height={100}>
  <VerticalBarSeries data={data} />
</FlexibleWidthXYPlot>

<FlexibleHeightXYPlot width={100}>
  <VerticalBarSeries data={data} />
</FlexibleHeightXYPlot>

<FlexibleXYPlot>
  <VerticalBarSeries data={data} />
</FlexibleXYPlot>

【讨论】：

请不要只发布一些工具或库作为答案。至少在答案本身中展示how it solves the problem。
我相信我正在按照您在原始帖子中的描述使用它，并且不确定您建议我根据您的帖子对其进行哪些更改