ΠΠΏΠΈΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΡ
Π§Π΅ΡΠΊΠΎΠ΅ ΠΈ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ.
ΠΠΎΠ΄ΡΠ»Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½: Π½Π΅ ΡΠ΄Π°Π΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ './Constants' Π² 'D: \ desktop \ ant_design_pro \ onefox \ src \ components \ Drag'
ΠΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ
Π¨Π°Π³ΠΈ ΠΏΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {Component} ΠΈΠ· response;
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ PropTypes ΠΈΠ· 'prop-types';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {DragSource} ΠΈΠ· 'response-dnd';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {ItemTypes} ΠΈΠ· './Constants';
ΠΠ΄Π΅ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ? ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ItemTypes?
ΠΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π§Π΅ΡΠΊΠΎΠ΅ ΠΈ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ.
Π‘ΠΊΡΠΈΠ½ΡΠΎΡΡ
ΠΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ½ΠΈΠΌΠΊΠΈ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡΠ°ΡΠ·Π΅Ρ Ρ ΡΠΎΠΌ
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠ΄Π° Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
@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 ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ Drag Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅!
@amazingmarvin ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π react-dnd ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΏ. Π ΡΠΈΠΏΡ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅. ΠΡΠ°ΠΊ, Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΅ΡΡΡ ΡΠΈΠΏΡ Β«Π·Π°Π΄Π°ΡΠ°Β» ΠΈ Β«ΠΏΡΠΎΠ΅ΠΊΡΒ», Π½ΠΎ Ρ Π²Π°Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Β«ΠΊΠΎΠ½ΡΠ°ΠΊΡΒ» ΠΈ Β«ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΡΒ». ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΡΠΈ ΡΡΡΠΎΠΊΠΈ (ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΈΠ±ΠΈΡΡΡΡ Π² Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΡΠ΅ΠΌΡ), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΡ Π²ΡΠ΅ Π² ΡΠ°ΠΉΠ»Π΅:
ΡΠΎ Π² Π²Π°ΡΠ΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Drag / Contact.js Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ:
ΠΠΎΡ ΠΎΠΆΠ΅, Π²Π°ΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΉΠ» Constants.js ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ Drag Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅!