Question

我正在努力跟随React DND国际象棋教程（足够简单），但我似乎遇到了一段我的代码。我收到一个错误，指出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>
    );
  }
});

Answer 1

我通过将所有内容从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);

React DND，connectDragSource不是函数错误

1 个答案: