Question

我已经将这个小沙盒拼凑起来以演示：https://codesandbox.io/s/64xv97y45n

应该在输入字母时移动左上角的紫色div。键入字母后，redux存储上的currIndex（当前处于活动状态的框）的值将相应地增加或减少。然后，reducer使用currIndex来计算currentCoords或div的新绝对位置（出于附加沙箱的目的，“稍微向右”）。然后将currentCoords存储属性作为道具传递，以控制紫色div的动态姿势。但是div拒绝更新其姿势。 Redux DevTools告诉我currentCoords正在正确更新，或者至少更新得足以使它稍微移动一点。怎么了？

相关逻辑：

 const reducer = (state = initState, action) => {
      switch (action.type) {
        case "KEYPRESS":
          return {
            ...state,
            number: [...state.number, action.key],
            currIndex: ++state.currIndex,
            currentCoords: state.boxCoords[state.currIndex]
          };

<SNIP>

const Cursor = posed.div({
  visible: {
    opacity: 1,
    x: ({ xPos }) => xPos,
    y: ({ yPos }) => yPos
  },

  hidden: {
    opacity: 0
  }
});

<SNIP>



<Cursor
            className="cursor"
            initialPose="visible"
            xPos={this.props.currentCoords.x}
            yPos={this.props.currentCoords.y}
          />

使用动态react-pose，react和redux更改div的位置

0 个答案: