React-dnd 组件在 Storybook 中无法正常工作答案

【问题标题】：React-dnd Components not working correctly in StorybookReact-dnd 组件在 Storybook 中无法正常工作
【发布时间】：2019-10-21 00:41:16
【问题描述】：

我在尝试在 Storybook 中显示我的可拖放 (react-dnd) 组件时遇到了一些巨大的问题。我有两个相同的组件，但其中一个组件的 connectDragSource 在其 props 中正确连接，而另一个未定义（'connectDragSource is undefined'）。

组件 1：

// @flow
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {DragSource} from "react-dnd/lib/cjs/index";


const collect = (connect, monitor) => {
    return ({
            isDragging: monitor.isDragging(),
            connectDragSource: connect.dragSource(),
            connectDragPreview: connect.dragPreview()
        }
    );

}
const src = {
    beginDrag(props, monitor, component) {
        return {}
    },
};

export class Component1 extends Component<Props, State> {

    render() {
        const {connectDragSource} = this.props;
        if (!connectDragSource) {
            alert("I will never be called!!")
        }
        return (
            <div>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        );
    }
}

// $FlowFixMe
export default (DragSource("XY", src, collect)(Component1))

组件 2：

Component 2: 

// @flow
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {DragSource} from "react-dnd/lib/cjs/index";


const collect = (connect, monitor) => {
    return ({
            isDragging: monitor.isDragging(),
            connectDragSource: connect.dragSource(),
            connectDragPreview: connect.dragPreview()
        }
    );

}
const src = {
    beginDrag(props, monitor, component) {
        return {}
    },
};

export class Component2 extends Component<Props, State> {

    render() {
        const {connectDragSource} = this.props;
        if (!connectDragSource) {
            alert("I will always be called!! connectDragSource is undefined!!")
        }
        return (
            <div>222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
        );
    }
}

// $FlowFixMe
export default (DragSource("XY", src, collect)(Component2));

是的，我已经记得添加 DragDropContextProvider。我的两本故事书也“相同”：

import React from 'react';
import {storiesOf} from '@storybook/react';
import Component1 from "./Component1";

import {withKnobs} from '@storybook/addon-knobs/react';
import "../build/index.a62147863e7177001589.css";
import {DragDropContextProvider} from 'react-dnd'
import HTML5Backend from "react-dnd-html5-backend";

storiesOf('Component1', module)
    .addDecorator(withKnobs)
    .add('1', () => {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <Component1/>
            </DragDropContextProvider>)
    })

...和....

import React from 'react';
import {storiesOf} from '@storybook/react';
import {Component2} from "./Component2";

import {withKnobs} from '@storybook/addon-knobs/react';
import {DragDropContextProvider} from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

storiesOf('Component2 ', module)
    .addDecorator(withKnobs)
    .add('2', () => {

        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <Component2/>
            </DragDropContextProvider>)
    })

为什么 Component1 会注入其 connectDragSource 而 Component2 却没有？

我的组件的拖放是否会以某种方式干扰故事书中的拖放？？

有趣的是，如果我将 Component2 与 Component1 放在同一个故事中，那么 Component2 将起作用：

storiesOf('Component1 and Component2', module)
    .addDecorator(withKnobs)
    .add(' - 1 - ', () => {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <GenericModal/>
            </DragDropContextProvider>)
    })
    .add(' - 2 - ', () => {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <TableWidget/>
            </DragDropContextProvider>)
    })
    .add(' - 1 again - ', () => {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <GenericModal/>
            </DragDropContextProvider>)
    })

如果有人知道为什么会发生这种行为，我很想知道为什么。这个问题快把我逼疯了！

【问题讨论】：

标签： reactjs storybook react-dnd

【解决方案1】：

好的，我刚刚意识到我的问题是什么。我的组件文件中有两个导出：

export class Component1 extends Component<Props, State> 

export default (DragSource("XY", src, collect)(Component1))

这真的很糟糕，因为在我的故事书中我是这样导入的：

import {Component2} from "./Component2";

这基本上意味着正在导入 Component2，而不是装饰组件。

解决方案是像这样从 Component2 中删除导出

class Component2 extends Component<Props, State>

然后像这样去掉故事书上的花括号

import Component2 from "./Component2";

【讨论】：