我拼凑了这个小沙盒来演示:https://codesandbox.io/s/64xv97y45n
左上角的紫色div应该随着字母的输入而移动。当输入字母时,redux存储上的currIndex (当前活动框)值相应地递增或递减。然后,reducer使用currIndex来计算currentCoords或div的新的绝对位置(对于附加的沙箱,“稍微向右一点”)。然后,currentCoords商店属性作为一个道具传递,以控制紫色div的动态姿势。但是div拒绝更新它的姿势。currentCoords DevTools告诉我,Redux正在正确更新,或者至少更新得足够好,可以稍微移动一下。怎么回事?
相关逻辑:
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}
/>
发布于 2018-10-18 06:15:30
如果您希望在不更改当前pose
的情况下转换posed
元素,则需要传递一个poseKey
以对其进行反应。同样根据initialPose
属性的文档:
一旦组件挂载,它将从这个姿势过渡到
pose
。
这就是为什么have必须将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}
/>
https://stackoverflow.com/questions/52862829
复制相似问题