reactjs - 反应胜利给出错误提供给“VictoryLabel”的“对象”类型的无效道具“数据”，预期的“数组”

Question

我正在使用 React 的胜利图表，我对正在发生的事情感到非常困惑。我收到以下错误：

Invalid prop `data` of type `object` supplied to `VictoryLabel`, expected `array`

我所拥有的非常简单，如下所示：

public render() {
  return (
    <vic.VictoryChart>
      <vic.VictoryBar
        data={[
          { x: 0, y: 100 },
          { x: 1, y: 150 },
          { x: 2, y: 200 },
          { x: 3, y: 50 },
          { x: 4, y: 500 },
        ]}
        labelComponent={
          <vic.VictoryLabel text={d => d.y} />
        }
      />
    </vic.VictoryChart>
  );
}

有人可以告诉我这里的问题吗？我不知道为什么我会收到错误！

Answer 1

胜利文档说：

labelComponent 属性接受一个组件实例，该实例将用于为组件呈现标签

您仍然需要labels使用VictoryBar. 的目的labelComponent是进一步自定义定位或添加工具提示标签等内容。

文档中的一个示例：

<VictoryBar
  data={sampleData}
  labels={(d) => d.y}
  style={{ labels: { fill: "white" } }}
  labelComponent={<VictoryLabel dy={30}/>}
/>

这里labelComponentprop 用于移动每个标签的 y 轴，但我们仍然必须使用单独的 prop 定义标签值。希望这可以帮助！