ReactHooks + ReactDnd 드래그 데이터 로드 실현

로 딩 API 필드 드래그
마우스 로 백 엔 드 API 를 Form 에 끌 어 다 놓 으 면 API 를 자동 으로 불 러 오기 때문에 필드 가 폼 드래그 구성 요소 로 사 용 됩 니 다 react-dnd 이 플러그 인, 데이터 상호작용 과 페이지 업데이트 등 Hooks 를 사용 하여 Hooks 공식 문 서 를 실현 합 니 다.https://react.docschina.org/docs/hooks-intro.htmlReactDnd공식 문서http://react-dnd.github.io/react-dnd/
실현 절차
데이터 원본
http://jianjiacheng.com/json/swagger.json
프로젝트 구조
실현 절차
효과 도
데모 소스 코드
https://github.com/jianjiachenghub/ReactHooksDnD.git
드래그 로드 구성 요소 패키지 DragBox
구성 요 소 는 useDrag 이라는 dnd 플러그 인 으로 봉 인 된 hook 을 사용 하고 hook 이 되 돌아 오 는 함 수 를 DOM 의 ref 속성 에 할당 하여 조작 해 야 합 니 다. Items 는 데 이 터 를 끌 어 당 기 는 표현 형식 으로 Object 로 표시 합 니 다.

import React from 'react'
import { useDrag } from 'react-dnd'
import { Menu, Icon ,Button} from 'antd';
const DragBox = ({ name, data }) => {
    const [{ opacity }, drager] = useDrag({
        item: { name, type:'dragBox',data},
        collect: monitor => ({
            opacity: monitor.isDragging() ? 0.4 : 1,
        }),
    })
    return (
       
{name}
    )
}
export default DragBox

드래그 받 는 구성 요소 Dustbin
accept 속성 지정 드래그 만 받 아들 일 수 있 는 item 에서 type 이 drag Box 인 drop 은 감청 슬라이딩 이 완 료 된 반전 입 니 다.

import React from 'react'
import { useDrop } from 'react-dnd'
import CreactForm from "./CreactForm"
const style = {
    minHeight: 780,
    height: '100%',
    border: '1px dashed black'
}
const Dustbin = ({onDrop,data}) => {
    const [{ isOver, canDrop }, drop] = useDrop({
        accept: 'dragBox',
        drop: onDrop,
        collect: monitor => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
    })


    const getForm = (data)=>{
        if (Object.keys(data).length !== 0) {
            const {data:{properties}} = data
            return 
        }
    }
    return (
        

            {getForm(data)}
        
    )
}
export default Dustbin

인터페이스의 디 스 플레이 구성 요소 DndMenu
이 데이터 의 JS 코드 부분 에서 데 이 터 를 분석 하여 하위 구성 요소 에 전달 합 니 다.

       
           
               {returnData.map(({ name, data }, index) => (
                   
               ))}
           
           
                handleDrop(item)}
                   data={dropData}
               />
           
       

DND 를 사용 하려 면 DndProvider 에 넣 어야 합 니 다.

import React from 'react'
import ReactDOM from 'react-dom'
import DndMenu from './menu'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

function Dnd() {
    return (
        

            
                
            
        
    )
}
export default Dnd

질문
useEffect () 요청 데이터 의 논리

useEffect () 는 함수 구성 요소 에서 부작용 조작 을 수행 할 수 있 습 니 다

기본 적 인 상황 에서 첫 번 째 렌 더 링 후 업데이트 할 때마다 실 행 됩 니 다.

하지만 업데이트 할 때 부작용 이 다시 발생 할 필 요 는 없습니다

두 번 째 매개 변 수 는 react 에 게 이 매개 변수의 값 이 바 뀌 었 을 때 만 우리 가 전달 하 는 부작용 함수

를 실행 할 수 있 음 을 알려 줍 니 다.

effect 의 두 번 째 매개 변 수 는 빈 배열 로 어떠한 값 의 변 화 를 감청 하지 않 고 부작용 을 수행 할 수 있 음

    useEffect(() => {
        getData()
    },[]);

여 기 는 await 로 axios 가 돌아 온 데 이 터 를 분석 한 다음 업데이트 함수

를 호출 합 니 다.

    const getData = async () => {
        const result = await axios(
            `${GLOBAL_URL}/list`
        );
        console.log(result)
        const data = result.data[0]
        const api = getKey(data.apiPath)
        getTreeData(api,data.apiPath)
        const originalData = getOriginalData(data.apiPath,data.apiDefinitions)
        setData(originalData)
    }
    
    const [returnData, setData] = useState([]);//  returnData   UI

함수 식 구성 요소 간 데이터 교류
예전 에 Class 문법 을 사용 할 때 하위 구성 요소 내부 에서 this. props 를 사용 하면 부모 구성 요소 가 전달 하 는 데 이 터 를 얻 을 수 있 었 고 현재 함수 식 문법 은 하위 구성 요소 의 매개 변수 에서 재 구성 할당 값 을 사용 하여 상부 에서 전달 하 는 데 이 터 를 얻 을 수 있 습 니 다.

const DragBox = ({ name, data }) => {
}


function DndMenu(props) {
    return (
        
    )
}

hooks 구성 요 소 는 AntDesign 폼 함 수 를 어떻게 사용 합 니까?
이전 Class 문법 은 구성 요소 내부 에서 Ant 안의 Form 함 수 를 호출 하려 면 클래스 수식 기 @ 만 있 으 면 구성 요소 내부 에서 this. props 를 form 의 API 로 호출 할 수 있 습 니 다.

@Form.create()
@connect(({ usersModal, basicdata, loading }) => ({
  usersModal,
  basicdata,
  loading : loading.models.usersModal,
  loadingEditFlag : loading.effects['usersModal/saveEditFlag'],
  loadingUpdate : loading.effects['usersModal/UpdateUser'],
  loadingGet : loading.effects['usersModal/getUser'],
  loadingAdd : loading.effects['usersModal/addUser'],
}))
class UserDetail extends PureComponent {
}

현재 구성 요 소 를 다시 내 보 낼 때 Form. create () 로 돌아 오 는 함수 에 구성 요 소 를 직접 전달 할 수 있 습 니 다.

export default Form.create()(DndMenu)