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

Posted 2023-02-23

【中文标题】ReactJS 高阶组件不在渲染循环中转发属性

【英文标题】：ReactJS high order components not forwarding property in a render loop

【发布时间】：2015-12-23 20:04:18

【问题描述】：

我正在寻找一些指导。我遵循React Drag-n-Drop chess tutorial 将相同的原则应用于我的项目。但是当子类需要递归重复时，我就卡住了。当 Child 从 Parent 渲染时，一切正常。但是，当我从 Child 渲染函数递归渲染 Child 时，我会收到有关丢失默认道具的错误，这些道具应该根据高阶组件的工作方式由 DragSource() 转发。我会在代码下面给出props的控制台输出。

下面的代码是我正在尝试做的简化版本：

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

所以基本上我认为正在发生的事情是高阶组件没有将默认道具转发给从子组件循环呈现的子组件。

我很想得到任何人的建议，因为我已经研究了几个小时了。谢谢。

【参考方案1】：

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

render () 
  const  connectDragSource, isDragging  = this.props

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


const HigherChild = DragSource(ItemTypes.CHILD, taskSource, collect)(Child)

export default HigherChild 

【讨论】：

谢谢。我想了解的是为什么这样做：<li key=child> DragSource(ItemTypes.Child, taskSource, collect)(<Child index=i ref='child/' + i />) </li> 不能直接在 JSX 中工作