Question

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

组件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";

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

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

class Component2 extends Component<Props, State>

并像这样删除故事书上的花括号

import Component2 from "./Component2";

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

1 个答案: