React DND - canDrag 取决于组件状态答案

【问题标题】：React DND - canDrag depending on component stateReact DND - canDrag 取决于组件状态
【发布时间】：2017-07-21 09:51:03
【问题描述】：

我在使用 React-DND 时遇到问题。

我的问题是关于防止为特定状态拖动组件。但是“canDrag”只能有 props 和 monitor 作为参数。（在我的情况下，monitor.getItem 显示为 null）并且我不能使用这些道具，因为它们将出现在每个组件中（因为道具来自父组件）。

有人有解决这个问题的想法吗？

谢谢

【问题讨论】：

是的，没有办法从 canDrag 仅访问它的 props 来访问组件本身，并且 monitor.getItem 只会在拖动过程中返回一些东西，因为那是你正在传输的数据拖动事件，而不是组件。听起来您的组件做得太多，应该进一步拆分到您有一个可拖动的子组件的点，该子组件可以通过您用来控制是否可拖动的任何状态设置其道具，但无需发布您的代码很难进一步帮助
感谢您的回答！我的组件包含一个带有两个按钮的表单。一个使字段可编辑（这是组件的“可编辑”状态，在这种情况下不应拖动），另一个按钮用于保存数据。所以我的组件很简单
在这种情况下，听起来您应该在包装器组件中跟踪状态，并将其作为isEditable 属性传递给您的表单作为子组件。然后可以在canDrag 中对子组件进行评估。如果您发布一些代码，只能提供进一步的帮助

标签： reactjs react-dnd

【解决方案1】：

你可以在组件中而不是在规范中这样做

@DragSource(dragtype, sourceSpec, cnt => ({
  connectDragSource: cnt.dragSource(),
}))
export default class Dragable extends React.Component {
  state = {
    canDrag: false,
  }
  render() {
   const { connectDragSource } = this.props;
   const { canDrag } = this.state;
   const cntDragSource = canDrag ? connectDragSource : i => i;
    return cntDragSource(
     <div className="drag-target" />
    )
  }
}

【讨论】：

不知道为什么这被否决了，这是一种反模式吗？似乎工作得很好。