Question

我已经构建了一个递增按钮来增加path d SVG元素中的字符串（从n 3开始，每个数字加起来为20）。

增量按钮在我的reduce函数中执行以下操作，它可以正常工作

export default function svgs(state = [], action) {
  switch(action.type) {
      case 'INCREMENT_COORDINATES' :
        console.log("incrementing coordinaates");
        const a = action.index;
        let string = state[a].d;
        let array = string.split(" ");
        let max = array.length;
        let last = max - 2;
        let i = (state[a].index || 3) + 1;
        if ( i === last ) i = 3;
        if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20;
        return [
          ...state.slice(0,a), // before the one we are updating
          {...state[a], d: array.join(' '), index: i}, // updating
          ...state.slice(a + 1), // after the one we are updating
        ]
      default:
        return state;
  }
}

我的奋斗是，在SVG组件中path d也可以使用不同的数据对象

例如

除了

path d={svg.d}

它也可以

path d={svg.d2}
path d={svg.d3}

请参阅代码段示例

<svg>
  <svg>
    <g>
      <path d={svg.d}></path>
    </g>
  </svg>
  <g>
    <path d={svg.d2}></path>
    <path d={svg.d3}></path>
  </g>
</svg>

如何修改我的redux函数以仅增加特定SVG元素的字符串或字符串

我有一些svg元素可以包含所有svg对象（svg.d, svg.d2, svg.d3），或者只有两个（svg.d, svg.d2）或一个（svg.d）。

例如，如果我修改上面的redux函数，它可能类似于

let string = state[a].d || state[a].d2 || state[a].d3;

然后

return [
  ...state.slice(0,a), // before the one we are updating
  {...state[a], d: array.join(' '), index: i, d2: array.join(' '), index: i, d3: array.join(' '), index: i }, // updating
  ...state.slice(a + 1), // after the one we are updating
]

这里唯一的问题是，如果其中一个SVG元素在svg.d，svg.d2，svg.d3之间有一个或两个空对象，则在点击操作后它会获得相同的值修改了字符串，我不想要这个。

希望解释清楚，如果有必要，我会设置一个jsBin。

Answer 1

您可以映射svg对象并单独转换它们（如果存在）：

const aObj = state[a];
const [d, d2, d3] = [aObj.d, aObj.d2, aObj.d3].map((string) => {
    if(!string) return null;
    let array = string.split(" ");
    let max = array.length;
    let last = max - 2;
    let i = (state[a].index || 3) + 1;
    if ( i === last ) i = 3;
    if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20;
    return array.join(" ");
  });


return [
  ...state.slice(0,a), // before the one we are updating
  {...aObj, d, d2, d3}, // updating
  ...state.slice(a + 1), // after the one we are updating
]

我不确定我是否完全理解这个问题。

Redux状态下的条件函数

1 个答案: