recharts - 如何为 Rechart 组件创建自定义组件

Question

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

XAxis、YAxis、Tooltip、Legend、CartesianGrid、Cell 和 Bar

这样做的原因是因为我打算创建一个包含很多 Prop 的图表，并希望将所有默认 Prop 和自定义分离到他们自己的单个组件中，用于上面的列表组件。

我尝试将 CartesianGrid 放在一个 react ​​组件中，但网格不会显示

有什么想法吗？

Answer 1

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

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

例如:

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

会正确显示一行，但是

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

<LineChart>
    <MyLine />
<LineChart>

不会渲染线条。

这是因为，recharts 发现 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