Question

对于下一个代码，我收到错误：

 Uncaught Error: Cannot have two HTML5 backends at the same time.

此错误只发生，因为我正在尝试使用Box数组。如果不是

                {this.state.services}

如果我使用

         < Box key={1} name="Glassu" />

编译错误停止

我只使用一个html上下文。

    import React, { Component } from 'react'
    import { DragDropContextProvider } from 'react-dnd'
    import HTML5Backend from 'react-dnd-html5-backend'
    import ChartForProjectServices from './ChartForProjectServices'
    import Box from './Box'

    export default class Container extends Component {
    constructor(props){
        super(props);
        this.state = {
            services: [],
        }

        this.getAllServices = this.getAllServices.bind(this);

    };


    getAllServices()
    {
        var services = [];
        services.push(<Box key={1} name="Glassu" />);
        services.push(<Box key={2} name="Banana" />);
        services.push(<Box key={3} name="Paper" />);
        this.setState({services: services});

    }

    componentDidMount(){
        this.getAllServices()
    }

    render() {


        return (
            <DragDropContextProvider backend={HTML5Backend}>
                <div>
                    <div style={{ overflow: 'hidden', clear: 'both' }}>
                           <ChartForProjectServices allowedDropEffect="move" />
                    </div>
                    <div style={{ backgroundColor: 'green', overflow: 'hidden', clear: 'both' }}>
                        {this.state.services}
                    </div>
                </div>
            </DragDropContextProvider>
        )
    }
    }

注意：此代码基于发布于：

的React拖放示例

  https://github.com/react-dnd/react-dnd/tree/master/examples/01%20Dustbin/Copy%20or%20Move

Answer 1

我几乎一直都在使用componentDidMount（）而没有任何问题。但是，在这种情况下我不得不使用

    componentWillMount(){
        this.getAllServices()
    }

现在一切正常!!

处理不能同时拥有两个HTML5后端

1 个答案: