如何为 Rechart 组件创建自定义组件答案

【问题标题】：How to create custom components for Rechart components如何为 Rechart 组件创建自定义组件
【发布时间】：2019-09-23 16:58:51
【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

标签： recharts

【解决方案1】：

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

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

例如：

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

会正确显示一行，但是

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

<LineChart>
    <MyLine />
<LineChart>

不会渲染线条。

这是因为，recharts 发现 MyLine 组件是不允许的，因此不会显示。

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

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

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

【讨论】：