动态SVG使用对象数组

Question

我正在尝试使用react-native-svg

渲染一行

  renderBox = (strategy) => {
    const { x, y, fill, lineStartX, lineStartY, lineEndX, lineEndY} = this.getBoxDetails(strategy);

    return (
      <G>
        <Line
          x1={lineStartX}
          y1={lineStartY}
          x2={lineEndX}
          y2={lineEndY}
          stroke="red"
          strokeWidth="2"
        />

      </G>
    );
  };

我喜欢使用switch中的对象数组设置该行的数据：

switch (strategy) {
  case 'Situations':
    return {
      x: this.diagramWidth / 2 - this.boxWidth / 2,
      y: 5,
      fill: color,
      lines: [{
        lineStartX:  this.diagramWidth / 2,
        lineStartY: this.boxHeight,
        lineEndX: this.diagramWidth - (this.diagramWidth / 4),
        lineEndY: this.boxHeight * 2
      }]
    };

如何遍历'lines'数组并为每个对象生成line？

Answer 1

行不在你的getBoxDetails调用的解构中。 尝试替换它：

const { x, y, fill, lineStartX, lineStartY, lineEndX, lineEndY} = this.getBoxDetails(strategy);

使用：

const { x, y, fill, lines} = this.getBoxDetails(strategy);

然后使用.map迭代：

return (
  <G>
  { 
    lines.map( (line, index) => {
      return (<Line
        key={ index }
        x1={line.lineStartX}
        y1={line.lineStartY}
        x2={line.lineEndX}
        y2={line.lineEndY}
        stroke="red"
        strokeWidth="2"
      />);
      }
    )
  }
  </G>
);