如何为重新绘制组件创建自定义组件

Question

假设我正在使用重图表创建条形图，如何为以下每个重图表组件创建自定义组件：

XAxis，YAxis，工具提示，图例，CartesianGrid，单元格和条形图

之所以这样做，是因为我计划创建一个包含大量道具的图表，并希望将上面列表组件中所有默认的道具和自定义的各个组件分开。

我已经尝试过将CartesianGrid放到一个react组件中，网格不会显示。

有什么想法吗？

Answer 1

为了更好地组织代码，您似乎希望将现有的重新图表提供的组件封装在自定义组件中。

当前，重新图表不直接支持这一点，因为它们检查要呈现的元素的类型，如果不匹配允许的类型之一，则不会呈现。

前任：

<LineChart>
    <Line></Line>
</LineChart>

将正确显示一行，但是

function MyLine(props) {
    return <Line></Line>
}

<LineChart>
    <MyLine />
<LineChart>

不会渲染行。

这是因为，重新图表显示不允许使用MyLine组件，因此不会显示。

这是一个大问题，因为它不允许我们重用或组合组件。但是有一些解决办法，其中之一就是直接将自定义组件作为函数调用：

<LineChart>
{
    MyLine({})
}
</LineChart>

似乎也没有计划在未来提供这样的api。它们的github上的所有此类问题都已经关闭，但没有提供解决办法。

• https://github.com/recharts/recharts/issues/412
• https://github.com/recharts/recharts/issues/41
• https://github.com/recharts/recharts/issues/1470