为什么 Victory Charts 组件不可组合？

Question

我正在尝试创建一个 React 组件，它是一个折线图和散点图，看起来像这样：

带有圆圈的单行的 React 组件如下所示：

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

我正在尝试像这样使用组件：

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

但是Line 组件没有被渲染。只有当我直接将它们作为函数调用时才会呈现它们，如下所示：

export default function MyCoolChart () {
  return (
    <VictoryChart>
      {Line({ color: '#349CEE', chartData: data1 })}
      {Line({ color: '#715EBD', chartData: data2 })}
    </VictoryChart>
  );
}

我正在尝试制作一个可重用的组件，所以我宁愿不必将它作为一个函数来使用。我也想了解为什么会这样。谢谢！

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 }
];

Answer 1

感谢@boygirl 回复my github issue

事实证明，Victory 自己传递了一些道具，这些道具需要传递才能正确渲染。这方面的例子是domain 和scale。这是我更新的组件：

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>
  );
}