Question

我试图创建一个React组件，它是一个Line和Scatter图表，如下所示：

带圆圈的单行的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

结果胜利传递了一些自己需要传递的道具，以便正确渲染。例如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>
  );
}

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

1 个答案: