Reactjs 为什么不'；胜利图表组件是否可组合？

我正在尝试创建一个React组件，它是一个线条和散点图，如下所示：

带有圆圈的单行的“反应”组件如下所示：

function Line ({ color, chartData }) {
  return (
    <VictoryGroup data={chartData}>
      <VictoryLine
        style={{ data: { stroke: color } }}
      />
      <VictoryScatter
        style={{
          data: {
            stroke: color,
            fill: 'white',
            strokeWidth: 3
          }
        }}
      />
    </VictoryGroup>
  );
}

我正在尝试制作一个可重用的组件，因此我不希望将其作为函数使用。我也想了解为什么会发生这种情况。谢谢

作为参考，

data1

和

data2

的值：

const data1 = [
  { x: 'M', y: 2 },
  { x: 'Tu', y: 3 },
  { x: 'W', y: 5 },
  { x: 'Th', y: 0 },
  { x: 'F', y: 7 }
];
const data2 = [
  { x: 'M', y: 1 },
  { x: 'Tu', y: 5 },
  { x: 'W', y: 5 },
  { x: 'Th', y: 7 },
  { x: 'F', y: 6 }
];

---

感谢@boygirl对您的回复

事实证明胜利传递了它自己的一些道具，这些道具需要传递，才能正确地呈现事物。这方面的例子有

域

和

尺度

。以下是我更新的组件：

function Line ({ color, ...other }) {
  return (
    <VictoryGroup {...other}>
      <VictoryLine
        style={{ data: { stroke: color } }}
      />
      <VictoryScatter
        style={{
          data: {
            stroke: color,
            fill: 'white',
            strokeWidth: 3
          }
        }}
      />
    </VictoryGroup>
  );
}

函数行（{color，…other}）{
返回(
);
}

现在它是这样消费的：

function MyCoolChart () {
  return (
    <VictoryChart>
      <Line
        color='#349CEE'
        data={data1}
      />
      <Line
        color='#715EBD'
        data={data2}
      />
    </VictoryChart>
  );
}

函数表（）{
返回(
);
}

我尝试了你的精确代码，但我的线路没有显示出来。然而，如果我只是在“已消费”部分用VictoryLine替换Line，它就可以工作了。

function Line ({ color, ...other }) {
  return (
    <VictoryGroup {...other}>
      <VictoryLine
        style={{ data: { stroke: color } }}
      />
      <VictoryScatter
        style={{
          data: {
            stroke: color,
            fill: 'white',
            strokeWidth: 3
          }
        }}
      />
    </VictoryGroup>
  );
}

function MyCoolChart () {
  return (
    <VictoryChart>
      <Line
        color='#349CEE'
        data={data1}
      />
      <Line
        color='#715EBD'
        data={data2}
      />
    </VictoryChart>
  );
}