标签: react-dnd

在TypeScript + React项目中,我使用的是react-dnd及其DefinitelyTyped类型:

interface ExampleScreenProps { a, b, c }
interface ExampleScreenState { x, y, z }

class ExampleScreen extends React.Component<ExampleScreenProps, ExampleScreenState> { }

export default DragDropContext(HTML5Backend)(ExampleScreen);

这将在另一个组件中呈现:

import ExampleScreen from "./ExampleScreen";

<ExampleScreen a="a" b="b" c="c" />

这适用于TS 1.8,没有任何错误.当我升级到TS 2.0时,我得到以下编译错误:

错误:(90,10)TS2600:JSX元素属性类型'(ExampleScreenProps&{children？:ReactNode;})| (ExampleScreenProps&{children ...'可能不是联合类型.

这是以下类型的定义DragDropContext:

export function DragDropContext<P>(
    backend: Backend
): <P>(componentClass: React.ComponentClass<P> | React.StatelessComponent<P>) => ContextComponentClass<P>;

我不能把它放在一起.抱怨的错误是什么？它似乎不喜欢联合ComponentClass<P> | StatelessComponent<P>,但那些不是元素属性,元素属性很简单<P>.我尝试明确传递<P>:

export default DragDropContext<ExampleProps>(HTML5Backend)(ExampleScreen);

但同样的错误仍然存​​在.我可以通过声明输出来解决它:

export default DragDropContext(HTML5Backend)(ExampleScreen) as …

I'm using react-beautiful-dnd to make table rows draggable.
The dragging goes well, but when I scroll the page when I have a draggable it gets out of position.
I have no idea why.
Also in the css is nothing weird found.

I have no idea why this is happening and don't know how to fix this. Here is an example of my problem.

This is my code:

import update from "immutability-helper";
import * as React from "react";
import { DragDropContext, …

我正在阅读React-dnd项目的一个例子:

moveCard(dragIndex, hoverIndex) {
    const { cards } = this.state;
    const dragCard = cards[dragIndex];

    this.setState(update(this.state, {
      cards: {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragCard]
        ]
      }
    }));}

这个$ splice与本页解释的相同吗？

任何人都可以解释一下这段代码的作用是什么吗？这个$splice功能对我很困惑.

我不完全理解它,但显然不建议使用findDOMNode().

我正在尝试创建拖放组件,但我不确定如何从组件变量访问refs.这是我目前拥有的一个例子:

const cardTarget = {
    hover(props, monitor, component) {
        ...
        // Determine rectangle on screen
        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
        ...
    }
}

资源

编辑

它可能是由我的组件既是拖放源和目标引起的,因为我可以让它在这个例子中工作但不是这个.

monitor.getDropResult()返回null(我看它是console.log).它应该返回对象(拖动项)及其位置.为什么它返回null？

我使用DragSource,DropTarget对我的组件进行签名.但它仍然返回null

这是我的整个组件代码:

import React, { PropTypes } from 'react';
import { DragSource } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';

import { StoneConstants, StoneTypes, ItemTypes } from 'constants/AppConstants';
import OkeyStoneBase from 'components/OkeyStoneBase/OkeyStoneBase';

import './_OkeyStone.scss';

function checkForDragAction(props) {

  // TODO receive the action via prop
  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE) {
    props.onWithdrawMiddle();
  } else if (props.stoneType === StoneTypes.ON_DISCARD_WEST) {
    props.onWithdrawLeft();
  }
}

function applyDropResult(props, result) {

  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE || props.stoneType === StoneTypes.ON_DISCARD_WEST) {
      if (result === null) …

我有一个使用React DnD插件的拖放组件的以下简单演示.

Card.js(DropSource)

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';


const ItemTypes = {
    CARD: 'card'
};

const cardSource = {
    beginDrag(props) {
      return {  };
    }
}

function collect(connect, monitor) {
    return {
       connectDragSource : connect.dragSource(),
       connectDragPreview: connect.dragPreview(),
       isDragging : monitor.isDragging()
    } 
}

class Card extends Component {

    render() {
        const { connectDragSource , isDragging } = this.props;

        return connectDragSource( 
          <div style={{
            opacity : isDragging ? 0.5 : 1,
            height: '50px',
            width: …

有没有人能够使用带有 useDrag 和 useDrop 钩子的功能组件从https://github.com/react-dnd/react-dnd测试拖放功能？

根据此处找到的示例http://react-dnd.github.io/react-dnd/docs/testing，他们使用 DragSource 或 DropTarget HOC 装饰原始组件。例如：

// ...

export interface BoxProps {
    name: string

    // Collected Props
    isDragging: boolean
    connectDragSource: ConnectDragSource
}
const Box: React.FC<BoxProps> = ({ name, isDragging, connectDragSource }) => {
    const opacity = isDragging ? 0.4 : 1
    return (
        <div ref={connectDragSource} style={{ ...style, opacity }}>
            {name}
        </div>
    )
}

export default DragSource(
    ItemTypes.BOX,
    {
        beginDrag: (props: BoxProps) => ({ name: props.name }),
        endDrag(props: BoxProps, monitor: DragSourceMonitor) { …

那个游戏是用react和redux开发的.我不是react-redux开发者(我是.net开发人员)但我必须继续这个项目所以我是新的反应和redux那个游戏性能在一些Android手机中太糟糕了.所以我分析project.I看到组件渲染方法每秒都有效.我的组件包含30多个其他组件.所以每个secon它重新渲染,这导致一些旧的Android手机性能不佳

为什么React组件每秒重新渲染一次？我能阻止它吗？我搜索那个问题,我看到解决方案是shouldComponentUpdate函数

shouldComponentUpdate(nextProps,nextState) {

        console.log(nextProps.gameStore.get('state'));//waiting
        console.log(this.props.gameStore.get('state'));//waiting

        console.log(this.state);
        console.log(nextState);
        if (nextProps.gameStore.get('state')==this.props.gameStore.get('state')) {
            return false;
        }
        else {
            return true;
        }
        }

但是在这个函数nextstate和这个状态是一样的,nextProps.gameStore.get('state')和this.props.gameStore.get('state')是一样的.为什么下一个状态和当前状态是一样的？我该怎么办？吗？我使用构造函数,但它仍然是相同的是我的所有组件代码

    import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
//import { default as HTML5Backend } from 'react-dnd-touch-backend';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { bindFirstArguments } from 'utils/bindFirstArgument';
import * as OkeyGameActions from 'actions/OkeyGameActions';
import * as OkeyNetActions from 'actions/OkeyNetActions';

import * as OkeyChatActions from 'actions/Chatactions';

import …

我是 React 新手，并尝试模拟此处找到的行拖放代码：https ://react-table-omega.vercel.app/docs/examples/row-dnd

如果我打开沙箱，所有默认代码都可以正常工作。如果我在本地复制粘贴代码，编译时会出现以下错误：

Attempted import error: 'react-dnd-html5-backend' does not contain a default export (imported as 'HTML5Backend')

我使用安装了该库npm install react-dnd-html5-backend --save，并且没有对其进行任何修改。

导入行是：

import HTML5Backend from 'react-dnd-html5-backend'

这是从教程中复制粘贴的。我不明白为什么它会抛出错误，也不明白如何修复它。有什么想法吗？

我正在尝试使用 React React-dnd 制作 Trello 克隆。 只需输入下面的代码我就会收到错误

 const [{ isDragging }, dragRef] = useDrag({
    item: { type: "CARD" },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

我收到以下错误

必须定义spec.type

invariant
C:/Users/lucca/Documents/GitHub/2B-task/src/index.ts:28
 25  |   );
  26 | } else {
  27 |   let argIndex = 0;
> 28 |   error = new Error(
     | ^  29 |     format.replace(/%s/g, function() {
  30 |       return args[argIndex++];
  31 |     })