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}
          />

Answer 1

如果您想在不更改当前posed的情况下转换pose元素，则需要传递poseKey来作出反应。同样根据initialPose属性的文档：

安装组件后，它将从该姿势过渡到pose。

这就是为什么必须将pose属性传递给posed组件的原因，否则initialPose将被重置。因此，基本上<Cursor>组件应呈现为：

<Cursor
   className="cursor"
   initialPose="visible"
   pose="visible"                        // you can hold the pose in your state and use it here like this.state.pose
   poseKey={this.props.currentCoords.x}
   xPos={this.props.currentCoords.x}
   yPos={this.props.currentCoords.y}
/>

通过将redux状态传递给react中的动态react-pose道具来移动div

1 个答案: