Question

让我们说我正在使用图表创建条形图，我将如何为以下每个图表组件创建自定义组件：

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

之所以这样，是因为我计划创建一个包含大量道具的图表，并希望将所有默认道具和自定义项分离到它们自己的单独组件中，用于上述列表组件。

我尝试将CartesianGrid放入react组件中，并且网格将不会显示

有什么想法吗？

Answer 1

似乎您想将现有的Recharts提供的组件包装在自定义组件中，以更好地组织代码。

Recharts当前不直接支持此功能，因为它们会检查您正在渲染的元素的类型，并且如果它与允许的类型之一不匹配，则不会被渲染。

例如：

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

将正确显示一行，但是

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

<LineChart>
    <MyLine />
<LineChart>

不会渲染该行。

这是因为，重新绘制图表会发现MyLine组件是不允许的，因此不会显示。

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

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

似乎也没有计划在将来提供这样的api。他们在github上的所有此类问题已经关闭，而没有提供解决方案。