Π― ΠΏΡΡΠ°ΡΡΡ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ redux, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ DnD Π²ΠΎ Π²ΡΠ΅ΠΌ ΠΌΠΈΡΠ΅. ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΡΠ΅Π»ΠΈ (Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅Π»Ρ) Π·Π°Π²ΠΈΡΠ°Π΅Ρ. ΠΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Source, Π½ΠΎ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π»Ρ. Π ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, Π½ΠΎ ΠΎΠ½ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ, ΠΈ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΌΠΎΠ³Ρ ΡΡΠ΄ΠΈΡΡ, Π½Π΅Ρ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ·Π½Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ°Π΅ΡΡΡ. Π― ΠΌΠΎΠ³ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠΌ-Π°ΡΡΡ, Π½ΠΎ ΡΡΠΎ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ. Π― Π΄ΡΠΌΠ°Π» ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² dropTarget ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Β«Π½Π΅Π³Π»ΡΠ±ΠΎΠΊΡΡΒ» ΠΏΡΠΎΠ²Π΅ΡΠΊΡ, Π½ΠΎ ΡΡΠΎ Π½Π΅ Π΄Π°Π΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΡΠ΅Π»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π·Π°Π²ΠΈΡΠ°Π΅Ρ. Π― ΠΏΠΎΠ΄ΠΎΠ·ΡΠ΅Π²Π°Ρ, ΡΡΠΎ Π΅ΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ DnD Context, Π½ΠΎ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΠΊΠΎΠΏΠ°Π»ΡΡ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΡΠΌΠΎΠ³Ρ ΡΠ²ΡΠ·Π°ΡΡ ΠΌΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ onDrag*
ΡΡΠΎΠ±Ρ Π΄Π΅Π»Π°ΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ΄ΠΎΠΌ ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ react-dnd
Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ Π±ΡΠΊΡΠ½Π΄ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ. ΠΠΎ Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° componentWillReceiveProps
ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° nextProps.isOver !== this.props.isOver
. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ isOver: monitor.isOver()
ΠΊ DropTarget
collect()
.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π°
componentWillReceiveProps
ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π°nextProps.isOver !== this.props.isOver
. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡisOver: monitor.isOver()
ΠΊDropTarget
collect()
.