通过将redux状态传递给react中的动态react-pose道具来移动div
通过将redux状态传递给react中的动态react-pose道具来移动div
提问于 2018-10-18 04:07:33
我拼凑了这个小沙盒来演示：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}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52862829
复制相关文章
相似问题