higher-order 구성 요소와 반응 dnd 작업이 가능합니까?

Question

폼 빌더를 만들고 필드를 재정렬해야만 다시 사용할 수있는 장소에 모든 상용구 끌기/놓기 코드를 유지하고 상위 구성 요소를 좋은 방법으로 보였습니다. 하기 위해서. 그래서 다음과 같은 코드가 있습니다 :

function SortableField(FieldComponent) { 
    return class extends React.Component { 
     render() { 
      const { connectDragSource, connectDropTarget } = this.props; 
      return connectDragSource(connectDropTarget(
       <FieldComponent {...this.props}/> 
      )); 
     } 
    } 
} 
export default flow(
    DragSource('field', fieldSource, collect), 
    DropTarget('field', fieldTarget, collectTarget) 
)(SortableField); 

위 코드는 모두 상용구 드랙/드롭 코드입니다.

각 필드 유형 구성 요소를 그 안에 넣으라고 생각합니다. 문제는 내가 다음과 같은 오류가이 작업을 실행하는 경우입니다 : 나는 나를 SortableField을 통과 좋아하는 DragSource/DragTarget 일부 기능이 작동하지 않기 때문에 생각

Uncaught TypeError: Cannot call a class as a function

. 이 일을 할 수있는 방법이 있습니까?

Answer 1

SortableField()이 js 클래스 정의를 반환하기 때문에이 오류가 발생합니다.

FieldComponent을 사용하려면 간단히 가져온 다음이를 사용하는 클래스를 만듭니다. 아래에서 수정 된 코드 :

import FieldComponent from 'components/FieldComponent' 

class SortableField extends React.Component { 
    render() { 
     const { connectDragSource, connectDropTarget } = this.props; 
     return connectDragSource(connectDropTarget(
      <FieldComponent {...this.props}/> 
     )); 
    } 
} 
export default flow(
    DragSource('field', fieldSource, collect), 
    DropTarget('field', fieldTarget, collectTarget) 
)(SortableField);