1

我正在尝试遵循 React DND Chess 教程（很简单），但我的一段代码似乎遇到了障碍。当我声明它时，我收到一条错误消息，指出 connectDragSource 不是函数，如下面的代码所示。在过去的一天中，我尝试对其进行故障排除，并且已经用完了潜在客户。如果它有帮助，我正在使用 React-Redux-Universal 锅炉，但我怀疑这是否会通过我的路线和孩子被渲染造成任何问题。

组件代码：

 import React, { Component, PropTypes } from 'react';
import { DragSource } from 'react-dnd';
import { ItemTypes } from './Constants.js';

require('./box1.css');


const pieceSource = {
    beginDrag(props){
        return {};
    }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.DragSource(),
    isDragging: monitor.isDragging()
  }
};


export default class Student extends Component{

  render() {
    const { connectDragSource, isDragging } = this.props;
      return connectDragSource(
        <div style={{
          opacity: isDragging ? 0.5 : 1,
          fontSize: 25,
          fontWeight: 'bold',
          cursor: 'move'
        }}>
          ♘ !
        </div>
    );
  }
}

Student.PropTypes = {
  connectDragSource: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired
};



DragSource(ItemTypes.STUDENT, pieceSource, collect)(Student);

家庭组件代码：

import React, { Component, PropTypes } from 'react';
import Header from '../../components/Header/header';
import Footer from '../../components/Footer/footer';
import Student from '../../components/box1/box1';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
require('./home.css');


 class Home extends Component{
  render() {

    return (



        <div id="main">

              Hello World  
               <Student />



          </div>

    );
  }
}

export default DragDropContext(HTML5Backend)(Home);

应用代码：

import React, { Component, PropTypes } from 'react';
require('./app.css');

export default React.createClass({
  render() {
    return (
      <div id="app">
        {this.props.children}
      </div>
    );
  }
});
4

1 回答 1

0

通过将所有内容从 ES6 切换到 ES5 语法，我已经解决了我的问题。真的很奇怪，但它有效，请参见下面的代码：

var React = require('react');
var PropTypes = React.PropTypes;
var ItemTypes = require('./Constants').ItemTypes;
var DragSource = require('react-dnd').DragSource;

var knightSource = {
  beginDrag: function (props) {
    return {};
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }
}

var Knight = React.createClass({
  propTypes: {
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired
  },

  render: function () {
    var connectDragSource = this.props.connectDragSource;
    var isDragging = this.props.isDragging;

    return connectDragSource(
      <div style={{
        opacity: isDragging ? 0.5 : 1,
        fontSize: 25,
        fontWeight: 'bold',
        cursor: 'move'
      }}>
        ♘
      </div>
    );
  }
});

module.exports = DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight);
于 2016-03-20T20:28:34.357 回答