Экспонированная реакция-родственная для веб-перетаскивания "FindDomnode устарел" предупреждение ⇐ Javascript

[Anonymous]

Я работаю над эксплуатированным react-родным для веб-приложения, и я пытаюсь получить определенные функции Drag & Drop для работы. Я пробовал множество изменений в DraggableWord , но все, что я делаю, либо 1) создает предупреждение об остеве, либо 2) заставляет DraggableWord потерять сопротивление (это просто действует как обычный текст).
{
const viewRef = useRef(null);
const isAttempted = droppedWord !== null;

const animatedDropZoneStyle = useAnimatedStyle(() => {
const isHovering = hoverStates.value[blankIndex] || false;
return {
borderColor: isHovering ? theme.colors.primaryTwo : (isAttempted ? (isCorrect ? theme.colors.successTwo : theme.colors.error) : theme.colors.text),
borderWidth: isHovering ? 3 : 1,
};
});

const handleLayout = () => {
if (viewRef.current && typeof viewRef.current.getBoundingClientRect === 'function') {
const rect = viewRef.current.getBoundingClientRect();
onLayoutMeasured(blankIndex, {
x: rect.left + window.scrollX,
y: rect.top + window.scrollY,
width: rect.width,
height: rect.height,
});
}
};

const styles = StyleSheet.create({
dropZone: { borderWidth: 1, borderRadius: 4, minWidth: 80, height: 40, justifyContent: 'center', alignItems: 'center', marginHorizontal: 5, paddingHorizontal: 8 },
blankNumber: { color: theme.colors.textMuted, fontSize: 16 },
droppedWordText: { fontSize: 22, color: theme.colors.text },
});

return (

{isAttempted ? ({isCorrect ? droppedWord : answer}) : ({blankIndex + 1})}

);
};

const DraggableWord = ({ choice, answer, onDrop, dropZoneLayout, isAttempted, isCorrect, droppedWord, blankIndex, hoverStates }) => {
const opacity = useSharedValue(1);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const animatedRef = useAnimatedRef();

useEffect(() => { if (!isAttempted) { opacity.value = 1; } }, [isAttempted]);

const panGesture = Gesture.Pan()
.runOnJS(true)
.enabled(!isAttempted)
.onUpdate((event) => {
translateX.value = event.translationX;
translateY.value = event.translationY;

let isHovering = false;
if (dropZoneLayout) {
isHovering = (
event.absoluteX > dropZoneLayout.x && event.absoluteX < dropZoneLayout.x + dropZoneLayout.width &&
event.absoluteY > dropZoneLayout.y && event.absoluteY < dropZoneLayout.y + dropZoneLayout.height
);
}
hoverStates.value = { ...hoverStates.value, [blankIndex]: isHovering };
})
.onEnd((event) => {
hoverStates.value = { ...hoverStates.value, [blankIndex]: false };

const wordIsOverDropZone = dropZoneLayout && (
event.absoluteX > dropZoneLayout.x && event.absoluteX < dropZoneLayout.x + dropZoneLayout.width &&
event.absoluteY > dropZoneLayout.y && event.absoluteY < dropZoneLayout.y + dropZoneLayout.height
);

if (wordIsOverDropZone) {
onDrop(blankIndex, choice);
if (choice === answer) {
opacity.value = withTiming(0, { duration: 200 });
} else {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
}
} else {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
}
});

const animatedStyle = useAnimatedStyle(() => {
let backgroundColor = theme.colors.grey;
if (isAttempted) {
if (choice === answer) { backgroundColor = theme.colors.successTwo; }
else if (choice === droppedWord && !isCorrect) { backgroundColor = theme.colors.error; }
}
return {
transform: [{ translateX: translateX.value }, { translateY: translateY.value }],
zIndex: translateX.value !== 0 || translateY.value !== 0 ? 100 : 1,
opacity: opacity.value,
backgroundColor,
padding: 10,
margin: 5,
borderRadius: 8,
borderWidth: 1,
borderColor: theme.colors.border,
};
});

const styles = StyleSheet.create({ wordText: { fontSize: 18, color: theme.colors.text } });

// THIS WORKS BUT PRODUCES THE WARNING
return (


{choice}


);
};

const WordBank = ({ blank, blankIndex, onDrop, dropZoneLayout, droppedWord, isCorrect, hoverStates }) => {
const styles = StyleSheet.create({
bankContainer: { alignItems: 'center', marginVertical: 10, padding: 10, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, width: '100%' },
bankTitle: { color: theme.colors.textMuted, fontSize: 16, marginBottom: 5 },
wordsWrapper: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' },
});
return (

Bank {blankIndex + 1}

{blank.choices.map((choice) => (

))}


);
};

const CaseDragAndDrop = () => {
const sentenceWithBlank = "The quick brown fox [BLANK] over the lazy dog.";
const blanks = [
{
answer: "jumps",
choices: ["runs", "sleeps", "jumps"],
},
];
const numBlanks = blanks.length;

const [droppedWords, setDroppedWords] = useState(() => Array(numBlanks).fill(null));
const [correctness, setCorrectness] = useState(() => Array(numBlanks).fill(null));
const [dropZoneLayouts, setDropZoneLayouts] = useState({});
const hoverStates = useSharedValue({});

const handleDrop = (blankIndex, word) => {
if (droppedWords[blankIndex]) return;
setDroppedWords(prev => { const newWords = [...prev]; newWords[blankIndex] = word; return newWords; });
setCorrectness(prev => { const newCorrectness = [...prev]; newCorrectness[blankIndex] = word === blanks[blankIndex].answer; return newCorrectness; });
};

const handleDropZoneLayout = (index, layout) => {
if (JSON.stringify(dropZoneLayouts[index]) !== JSON.stringify(layout)) {
setDropZoneLayouts(prev => ({ ...prev, [index]: layout }));
}
};

const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', padding: 20, width: '100%', maxWidth: 700, alignSelf: 'center' },
sentenceOuterContainer: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', paddingHorizontal: 10, lineHeight: 50 },
sentenceText: { fontSize: 22, color: theme.colors.text, marginHorizontal: 2, lineHeight: 40 },
wordBanksContainer: { width: '100%', marginTop: 20 },
});

let blankCounter = 0;
const renderedSentence = sentenceWithBlank.split(/(\[BLANK\])/g).map((segment, index) => {
if (segment === '[BLANK]') {
const currentBlankIndex = blankCounter++;
return (

);
}
return segment ? {segment} : null;
});

return (


{renderedSentence}


{blanks.map((blank, index) => (

))}


);
};

export default function App() {
return (



);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ted-warnin