React-dnd: λͺ¨λ“ˆμ„ 찾을 수 μ—†μŒ: 'D:\desktop\ant_design_pro\onefox\src\components\Drag'의 './Constants'λ₯Ό 확인할 수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 06μ›” 02일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: react-dnd/react-dnd

버그 μ„€λͺ…
버그가 무엇인지에 λŒ€ν•œ λͺ…ν™•ν•˜κ³  κ°„κ²°ν•œ μ„€λͺ….
λͺ¨λ“ˆμ„ 찾을 수 μ—†μŒ: 'D:\desktop\ant_design_pro\onefox\src\components\Drag'의 './Constants'λ₯Ό 확인할 수 μ—†μŠ΅λ‹ˆλ‹€.
μž¬ν˜„ν•˜κΈ° μœ„ν•΄
λ™μž‘μ„ μž¬ν˜„ν•˜λŠ” 단계:
'react'μ—μ„œ React, { Component } κ°€μ Έμ˜€κΈ°;
'prop-types'μ—μ„œ PropType을 κ°€μ Έμ˜΅λ‹ˆλ‹€.
import { DragSource } from 'react-dnd';
'./μƒμˆ˜'μ—μ„œ { ItemTypes } κ°€μ Έμ˜€κΈ°;

μƒμˆ˜λŠ” 어디에 μžˆμŠ΅λ‹ˆκΉŒ? μ–΄λ–»κ²Œ ItemTypesλ₯Ό κ°€μ Έμ˜¬ 수 μžˆμŠ΅λ‹ˆκΉŒ?
μ˜ˆμƒλ˜λŠ” 행동
μ˜ˆμƒν–ˆλ˜ 일에 λŒ€ν•œ λͺ…ν™•ν•˜κ³  κ°„κ²°ν•œ μ„€λͺ….

μŠ€ν¬λ¦°μƒ·
ν•΄λ‹Ήν•˜λŠ” 경우 문제λ₯Ό μ„€λͺ…ν•˜λŠ” 데 도움이 λ˜λŠ” μŠ€ν¬λ¦°μƒ·μ„ μΆ”κ°€ν•˜μ„Έμš”.

λΈŒλΌμš°μ € 크둬

μΆ”κ°€ μ»¨ν…μŠ€νŠΈ
여기에 λ¬Έμ œμ— λŒ€ν•œ λ‹€λ₯Έ μ»¨ν…μŠ€νŠΈλ₯Ό μΆ”κ°€ν•˜μ‹­μ‹œμ˜€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

react-dndμ—μ„œ λͺ¨λ“  λ“œλž˜κ·Έ μ†ŒμŠ€μ—λŠ” μœ ν˜•μ΄ μžˆμŠ΅λ‹ˆλ‹€. 그리고 μœ ν˜•μ΄ λ¬΄μ—‡μΈμ§€λŠ” ν”„λ‘œκ·Έλž¨μ—μ„œ λ“œλž˜κ·Έν•˜λŠ” ν•­λͺ©μ— 따라 λ‹€λ¦…λ‹ˆλ‹€. λ”°λΌμ„œ λ‚΄ μ•±μ—λŠ” "μž‘μ—…" 및 "ν”„λ‘œμ νŠΈ" μœ ν˜•μ΄ μžˆμ§€λ§Œ "μ—°λ½μ²˜" 및 "쑰직"이 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 이 λ¬Έμžμ—΄μ„ 항상 μž…λ ₯ν•˜κ³  싢지 μ•Šλ‹€λ©΄(ν…Œλ§ˆμ˜ μ² μžκ°€ 틀릴 수 μžˆμœΌλ―€λ‘œ) νŒŒμΌμ— λͺ¨λ‘ μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// Constants.js
export default {
  CONTACT: "contact",
  ORGANIZATION: "organization",
};

그런 λ‹€μŒ 예λ₯Ό λ“€μ–΄ Drag/Contact.jsμ—μ„œ λ‹€μŒμ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

import ItemTypes from "./Constants";

class Contact extends Component {
  ...
}

Contact = DragSource(ItemTypes.CONTACT, ...)(Contact);
export { Contact };

λ¬Έμ œλŠ” Constants.js νŒŒμΌμ„ μƒμ„±ν•˜μ§€ μ•Šμ•˜κ±°λ‚˜ PC의 Drag 디렉토리에 μ—†λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€!

λͺ¨λ“  3 λŒ“κΈ€

@yaoyuande 이 λ¬Έμ œλŠ” react-dnd 와 관련이 μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

react-dndμ—μ„œ λͺ¨λ“  λ“œλž˜κ·Έ μ†ŒμŠ€μ—λŠ” μœ ν˜•μ΄ μžˆμŠ΅λ‹ˆλ‹€. 그리고 μœ ν˜•μ΄ λ¬΄μ—‡μΈμ§€λŠ” ν”„λ‘œκ·Έλž¨μ—μ„œ λ“œλž˜κ·Έν•˜λŠ” ν•­λͺ©μ— 따라 λ‹€λ¦…λ‹ˆλ‹€. λ”°λΌμ„œ λ‚΄ μ•±μ—λŠ” "μž‘μ—…" 및 "ν”„λ‘œμ νŠΈ" μœ ν˜•μ΄ μžˆμ§€λ§Œ "μ—°λ½μ²˜" 및 "쑰직"이 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 이 λ¬Έμžμ—΄μ„ 항상 μž…λ ₯ν•˜κ³  싢지 μ•Šλ‹€λ©΄(ν…Œλ§ˆμ˜ μ² μžκ°€ 틀릴 수 μžˆμœΌλ―€λ‘œ) νŒŒμΌμ— λͺ¨λ‘ μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// Constants.js
export default {
  CONTACT: "contact",
  ORGANIZATION: "organization",
};

그런 λ‹€μŒ 예λ₯Ό λ“€μ–΄ Drag/Contact.jsμ—μ„œ λ‹€μŒμ„ μ‚¬μš©ν•©λ‹ˆλ‹€.

import ItemTypes from "./Constants";

class Contact extends Component {
  ...
}

Contact = DragSource(ItemTypes.CONTACT, ...)(Contact);
export { Contact };

λ¬Έμ œλŠ” Constants.js νŒŒμΌμ„ μƒμ„±ν•˜μ§€ μ•Šμ•˜κ±°λ‚˜ PC의 Drag 디렉토리에 μ—†λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€!

@amazingmarvin 정말 κ°μ‚¬ν•©λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰