小编J R*_*des的帖子

我正在尝试在 ReferenceLine 右侧添加一个带有圆形边框的自定义标签，如下所示https://i.stack.imgur.com/b20eD.jpg，正如它所说，您可以在此处的文档中执行以下操作： ://recharts.org/en-US/api/ReferenceLine#label。

我们\xe2\x80\x99遇到的问题是，每当我们尝试在此处传递一个组件时，<ReferenceLine {...props} label={<CustomizedLabel />} />无论我尝试什么，都不会渲染任何内容。

我无法找到任何示例，其中他们专门对参考线标签执行了此操作，但已设法使组件传递功能适用于数据点，所以我不确定我们在哪里\xe2\x80\x99 这里出错了。

目前，我们可以使用对象自定义标签，但是当传递我们自己的元素时，不会呈现任何内容。

<ReferenceLine\n                  y={dataLimits.lL}\n                  stroke={Colors.red.hex}\n                  strokeDasharray="3 3"\n                  label={{\n                    position: "right",\n                    value: dataLimits.lL,\n                    fill: "#595959",\n                    fontSize: "0.75rem"\n                  }}\n                  ifOverflow="extendDomain"\n                />\n

我们想将其转换为

<ReferenceLine\n                  y={dataLimits.lL}\n                  stroke={Colors.red.hex}\n                  strokeDasharray="3 3"\n                  label={<LimitLabel />}\n                  ifOverflow="extendDomain"\n                />\n

其中 LimitLabel 具有上述属性，但具有圆形边框。

控制台上不会出现错误消息，DOM 中也不会出现任何组件。

这是我们当前实现的 jsfiddle，没有自定义组件，如果这有助于演示\n https://jsfiddle.net/rbyztucn/1/