如何使用react-dnd中的DragLayer组件修复Flow 0.80.0错误？

Question

我将flow-bin从0.54.0更新为0.80.0，现在我从react-dnd库中看到了一些新的流错误。DragLayer高阶组件就是一个例子。

代码：

// MyCustomDragLayer.jsx
// ----------------------------------------

import { DragLayer } from 'react-dnd'

class MyCustomDragLayer extends Component<Props> {
  // ...
}

export default DragLayer(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  initialClientOffset: monitor.getInitialClientOffset(),
  delta: monitor.getDifferenceFromInitialOffset(),
  isDragging: monitor.isDragging(),
}))(MyCustomDragLayer)



// render() function in a different file
// ----------------------------------------

import DragLayer from './MyCustomDragLayer.jsx'

<DragLayer
  {...{
    prop_one,
    prop_two,
    // etc.
  }}
/>

流错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ components/foo/bar.jsx:499:10

Cannot create DragLayer element because:
• property currentOffset is missing in props [1] but exists in object literal [2].
• property delta is missing in props [1] but exists in object literal [2].
• property initialClientOffset is missing in props [1] but exists in object literal [2].
• property initialOffset is missing in props [1] but exists in object literal [2].
• property isDragging is missing in props [1] but exists in object literal [2].
• ... 2 more errors.

    components/foo/index.jsx
    496│           }}
    497│         />
    498│
[1] 499│         <DragLayer
    500│           {...{
    501│             prop_one,
    502│             prop_two,
    503│             // etc.
    504│           }}
    505│         />
    506│

    components/foo/bar.jsx
[2] 410│ export default DragLayer(monitor => ({
    411│   item: monitor.getItem(),
    412│   itemType: monitor.getItemType(),
    413│   initialOffset: monitor.getInitialSourceClientOffset(),
    414│   currentOffset: monitor.getSourceClientOffset(),
    415│   initialClientOffset: monitor.getInitialClientOffset(),
    416│   delta: monitor.getDifferenceFromInitialOffset(),
    417│   isDragging: monitor.isDragging(),
    418│ }))(MyCustomDragLayer)

我如何修复这个流错误？

Answer 1

是的，我在类似的react-Dnd0.79.1问题上使用了$FlowFixMe (不完全相同)，因为我不能解决它。如果你也做不到，可能是某个地方出了问题。

很抱歉没有太多帮助，只是提供支持，也许不是你。