当挂载在酶中时，为什么带有响应式容器的ReChart图表不呈现图表的子元素?

Question

鉴于我有一个使用 React 和 Recharts 的图表，如下所示：

<ResponsiveContainer width="99%" height="99%">
<LineChart data={data}>
<Line dataKey="test"/>
</LineChart>
</ResponsiveContainer>

为什么使用 JsDom 将其挂载在酶中不会渲染LineChart的子项(即未挂载Line(？

Answer 1

在为网页编写响应式 ReCharts 组件时，将字符串传递给ResponsiveChart的width或heightprop 是有效的，并将在 HTML 标记中呈现。但是，下面的图表组件(无论是LineChart还是任何其他图表(都需要特定的整数宽度。如果它收到一个字符串，它将无法通过宽度/高度验证并返回 null 而不是呈现。

据推测，ResponsiveChart负责响应地向它的孩子发送正确的宽度/高度道具。但是无论出于何种原因，它在挂载时都不会这样做(可能是因为 JsDom 没有模拟window的某些功能(，因此它会发送字符串，这会导致图表不呈现其子项，而不返回或记录任何错误消息。

要解决此问题，请为宽度和高度添加一个有效的整数值：

<ResponsiveContainer width={700} height={300}>
<LineChart data={data}>
<Line dataKey="test"/>
</LineChart>
</ResponsiveContainer>

就我而言，我添加了一个 prop 以将字符串保留为默认值，但允许在测试上下文中进行覆盖，即：width={this.props.width || "99%"}.