5

我正在尝试创建一个 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>
  );
}

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

作为参考, 和 的data1data2

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

1 回答 1

2

感谢@boygirl 回复我的 github 问题

结果 Victory 自己传递了一些道具,这些道具需要传递才能正确渲染。这方面的例子是domainscale。这是我更新的组件:

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>
  );
}
于 2018-03-16T15:44:09.600 回答