Question

我正在寻找一点指导。我遵循React Drag-n-Drop chess tutorial对我的项目应用相同的原则。但是，当Child Class需要递归重复时，我陷入困境。当Child从Parent渲染时，一切正常。但是当我从Child渲染函数递归渲染一个Child时，我会得到错误的错误，这些错误应该由DragSource（）根据高阶组件的工作原理而转发。我将在代码下方提供道具的控制台输出。

下面的代码是我想要做的简化版本：

Constants.js

export const ItemTypes = {
  CHILD: 'child'
}

Parent.jsx

import React, { PropTypes } from 'react'
import Child from './Child'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd/modules/backends/HTML5'

class Parent extends React.Component {
  render () {
    return (
      <Child />
    ) 
  }
}

export default DragDropContext(HTML5Backend)(Parent)

Child.jsx

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

const taskSource = {
  beginDrag (props) {
    return {
      index: props.index
    }
  }
}

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

class Child extends React.Component {
  static get propTypes () {
    return {
      index: PropTypes.number,
      connectDragSource: PropTypes.func.isRequired,
      isDragging: PropTypes.bool.isRequired
    }
  }

  constructor(props) {
    super(props)

    console.log(props)

    this.state = {
      children: [1, 2, 3, 4]
    }
  }

  render () {
      const { connectDragSource, isDragging } = this.props

      return connectDragSource(
          <ul className='children'>
            { this.state.children.map((child, i) =>
              <li key={child}>
                <Child index={i} ref={'child/' + i} />
              </li>
            ) }
          </ul>
      )
  }
}

export default DragSource(ItemTypes.CHILD, taskSource, collect)(Child)

从父组件渲染功能调用时，

子组件道具的Console.log输出

{
  _id: "123"",
  connectDragSource: fn(),
  isDragging: false
}

从子组件呈现函数递归调用时，子组件道具的Console.log输出

{
  _id: "1234"
  index: 0
}

ERROR: Uncaught (in promise) TypeError: connectDragSource is not a function

所以基本上我认为正在发生的是高阶组件没有将默认道具转发到从子组件循环渲染的子组件。

我会喜欢任何人可能有的建议，因为我现在已经挖掘了几个小时。感谢。

Answer 1

所以这实际上是我学到的一个非常简单的答案。 Parent.jsx中导入的子项与Child.jsx中的子项不同。父类中的Child类具有高阶组件的行为，而子引用本身尚未应用高阶组件。为了解决这个问题，我必须在Child.jsx中执行此操作：

$(document).ready(function() {
    var pw = $('.fotorama__nav--thumbs').innerWidth();
    var cw = $('.fotorama__nav__shaft').innerWidth();
    var offset = pw -cw;
    var negOffset = (-1 * (pw -cw)) / 2;
    var totalOffset = negOffset + 'px';
    if (pw > cw) {
      $('.fotorama__nav__shaft').css('transform', 'translate3d(' + totalOffset + ', 0, 0)');
    }
});

ReactJS高阶组件不在渲染循环中转发属性

1 个答案: