React-dnd: Comment puis-je utiliser la répartition dans un composant connectDropTarget ?

Créé le 26 févr. 2016 · 4Commentaires · Source: react-dnd/react-dnd

lorsque j'utilise react-DND , j'ai trouvé un problème.

question, je veux utiliser dispatch dans un composant connectDropTarget.

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          component.localHandleMove(todo.todo_id);
      }
      return {};
  }
};


function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}
export default class TodoList extends Component {

    constructor(props) {
        super(props);
        this.localHandleMove = this.localHandleMove.bind(this);
    }

    localHandleMove(todo_id)  {
        this.props.dispatch(actions.completeTodo(todo_id,this.props.board_id))
    }

    render() {
        const { connectDropTarget } = this.props;
        //                  
        return connectDropTarget(
            <ul className="todo-list">
            {this.props.todos.map(function(todo){
               return <Todo key={todo.todo_id} todo={todo} />
            })}
            </ul>
        );
    } 
}


export default flow(
  connect(),
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect)
)(TodoList);

quand j'écris comme ça.

Uncaught TypeError: component.localHandleMove is not a function

Je veux comment puis-je utiliser la répartition dans un composant ?

Merci

Source

dreamcog

Commentaire le plus utile

Non, component.store est une variable d'instance qui est une API privée et qui n'est documentée nulle part. Il pourrait avoir disparu dans n'importe quelle version de React Redux, alors ne vous y fiez pas.

Ce que vous voulez, c'est mettre connect() _after_ DropTarget() pour que les accessoires injectés par connect() (y compris dispatch ) soient disponibles dans la cible de dépôt :

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon le 28 févr. 2016

👍6 ❤2

Tous les 4 commentaires

enfin, j'ai trouvé pourrait faire comme ceci:

const dropTodoTarget = {
      drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
    component.store.dispatch(actions.moveTodoBoard(todo.todo_id,todo.board_id,props.board_id));
      }
      return {};
  }
};

dreamcog le 26 févr. 2016

Ce que vous voulez, c'est mettre connect() _after_ DropTarget() pour que les accessoires injectés par connect() (y compris dispatch ) soient disponibles dans la cible de dépôt :

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon le 28 févr. 2016

👍6 ❤2

Ce que vous voulez, c'est mettre connect() après DropTarget()...

N'est-ce pas censé venir avant ?

shem86 le 3 mars 2016

👍5

Non, component.store est une variable d'instance qui est une API privée et qui n'est documentée nulle part. Il pourrait avoir disparu dans n'importe quelle version de React Redux, alors ne vous y fiez pas.
Ce que vous voulez, c'est mettre connect() _after_ DropTarget() pour que les accessoires injectés par connect() (y compris dispatch ) soient disponibles dans la cible de dépôt :
const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

Qu'est-ce que flow ici ?