Компоненты React-dnd не работают правильно в сборнике рассказов

Question

У меня возникли ОГРОМНЫЕ проблемы при попытке отобразить мои перетаскиваемые компоненты (act-dnd) в сборнике рассказов. У меня есть два идентичных компонента, но у одного из моих компонентов его connectDragSource правильно подключен в его подпорках, тогда как у другого я получаю неопределенный ('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>)
    })

Если кто-нибудь знает, почему происходит такое поведение, я хотел бы знать, почему. Эта проблема сводит меня с ума!

Answer 1

ОК, я только что понял, в чем моя проблема.У меня есть два экспорта в моем файле компонентов:

export class Component1 extends Component<Props, State> 

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

Это действительно плохо, потому что в моем сборнике рассказов я импортирую так:

import {Component2} from "./Component2";

Это в основном означает, что компонент2 импортируется,а не декорированный компонент.

Решение состоит в том, чтобы удалить экспорт из Component2 следующим образом:

class Component2 extends Component<Props, State> 

И удалить фигурные скобки в сборнике рассказов, например, так:

import Component2 from "./Component2";