小编min*_*hah的帖子

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion 并且代码在 reacy 中。据我了解，它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能：

export const Draggable: FC<DraggableInterface> = ({
  isDragging,
  setIsDragging,
  width,
  height,
  x,
  y,
  radius,
  children,
}) => {
  return (
      <motion.div
        {...{ isDragging }}
        {...{ setIsDragging }}
        drag
        dragConstraints={{
          left: Number(`${0 - x}`),
          right: Number(
            `${width - x}`,
          ),
          top: Number(`${0 - y}`),
          bottom: Number(
            `${height - y}`,
          ),
        }}
        dragElastic={0}
        dragMomentum={false}
        data-test-id='dragabble-element'
      >
        {children}
      </motion.div>
  );
};

我有一个测试片段如下：

it('should drag the node to the new position', async () => …

如何让 JavaFX 等待一个带有动画的方法完成，然后再转到下一个方法？所以我的代码如下：

public void spinWheel(){
        RotateTransition rotation = new 
        rotation.setByAngle(-(720+(15*(i+(24-finalIndex)))));
        rotation.play();
        wheelResult=wheel.spinWheel(i);

spinButton.setOnAction(e->{
    spinButton.setDisable(true);
    wheelGui.spinWheel();
    spinGame();
    });

所以 spinwheel() 方法就是动画。它本质上是一个轮子在旋转。该方法会打印一些代码，并在某些情况下重新激活按钮。然而，这是瞬时的。我希望动画在下一个方法运行之前完成，因为文本很快或按钮再次打开并可以中断操作。

我正在将Angular与NGRX效果一起使用，并且对可观察对象世界是陌生的。我想检查存储中是否存在数据，那么不应该调用API，而应该从存储中提取数据。我设法发现我可以使用withLatestFrom（）来检查商店中的最新值。下一部分让我感到困惑，我无法正常工作。我当前的代码如下：

 @Effect() getSomeContent$ = this.actions$
    .ofType(GET_SOME_CONTENT)
    .withLatestFrom(this.store$.select('store-section'))
    .map(([action, store]) => {
        const content = {};
        if (store.someContent.length > 0) {
           return new GetCategoryContentSuccessAction({ categoryContent: categories });
        }
        return Observable.from(action.payload);
    })
    .switchMap(payload => this.APIcall(payload)
        .then(data => {
            const content = {};
            data.items.map((item) => {
                const slug = data.slug;
                content[slug] = {
                    info: datasomeData
                };
            });
            return new GetSomeContentSuccessAction({ categoryContent: categories });
        })
        .catch((err) => {
            return new GetFailureAction({ error: {} });
        })
    );

我想使用某种if或else语句来检查商店。如果数据存在，我想将一个空对象发回给我必须处理的减速器。如果不是，我想调用API并将该数据发送回去。我不知道可观察对象是否可以分支，换句话说，可以做到吗？

有没有更好的方法可以实现这一目标？可能通过创建另一个操作来单独处理API。我想了解最佳实践的发展方向。任何帮助将不胜感激。

我有一个带有GUI的游戏,你可以按下几个按钮来完成游戏.

我有以下布尔值来测试:

public boolean complete(){
    if (initvalue==finalvaue)){
        return true;
    }
    else {
        return false;
    }
}

我想创建一个监听器来检查游戏是否完成并向用户打印消息.我想我需要为此创建一个SimpleBooleanProperty工作.但是我需要将它绑定到上面的布尔值吗？

最好的方法是什么？

我对钩子还很陌生，我正在尝试实现一个拖放容器组件，该组件在整个鼠标移动过程中都处理onDragStart，onDrag和onDragEnd函数。我一直在尝试使用钩子复制此处找到的代码：https : //medium.com/@crazypixel/mastering-drag-drop-with-reactjs-part-01-39bed3d40a03

我几乎可以使用下面的代码来工作。它使用样式化的组件进行动画处理。问题是，仅当您缓慢移动鼠标时它才起作用。如果您快速移动鼠标，则SVG或此div中包含的所有内容都将抛出屏幕。

我有一个component.js看起来像的文件

import React, { useState, useEffect, useCallback } from 'react';
import { Container } from './style'

const Draggable = ({children, onDragStart, onDrag, onDragEnd, xPixels, yPixels, radius}) => {
  const [isDragging, setIsDragging] = useState(false);
  const [original, setOriginal] = useState({
    x: 0,
    y: 0
  });
  const [translate, setTranslate] = useState({
    x: xPixels,
    y: yPixels
  });
  const [lastTranslate, setLastTranslate] = useState({
    x: xPixels,
    y: yPixels
  });

  useEffect(() =>{
    setTranslate({
      x: xPixels,
      y: yPixels
    });
    setLastTranslate({
      x: …