通过将redux状态传递给动态react-pose道具来反应移动div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (143)

我拼凑了这个小沙箱来演示:https//codesandbox.io/s/64xv97y45n

左上角的紫色div应该在键入字母时移动。键入字母时,redux存储上的currIndex(当前活动框)值会相应地递增或递减。然后,reducer使用currIndex来计算currentCoords或div的新绝对位置(为了附加沙箱的目的,'略微向右')。然后将currentCoords商店属性作为prop传递,以控制紫色div的动态姿势。但是div拒绝更新它的姿势。Redux DevTools告诉我当前的Coords正在更新,或者至少足以让它移动一点。是什么赋予了?

相关逻辑:

 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}
          />
提问于
用户回答回答于

如果你想在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}
/>

扫码关注云+社区

领取腾讯云代金券