Estoy buscando agregar elementos de lista arrastrables a mi DOM a través de JSX en reaccionar.
La salida esperada en el DOM debería verse así:
<li draggable="true" style="border: 1px solid red;">Test Scenario 1</li> <li draggable="true" style="border: 1px solid red;">Test Scenario 2</li> <li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>Pero la salida real es:
<li style="border: 1px solid red;">Test Scenario 1</li> <li style="border: 1px solid red;">Test Scenario 2</li> <li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>Código actual que he probado:
import React from 'react'; import { useDrag } from "react-dnd"; function LibraryItems(props) { const [{ isDragging }, dragRef] = useDrag(() => ({ type: "li", collect: (monitor) => ({ isDragging: monitor.isDragging(), }), })); // Declare and populate array of Library Scenarios const itemList = [] props.items.map(item => { itemList.push(<li style={{border: 'red 1px solid'}} ref={dragRef}>{item.title}</li>); }) return ( <ul> {itemList} </ul> ) } export default LibraryItemsBásicamente necesitas un dragRef para cada li , yo haría algo como esto:
const itemList = []; const drags = {}; props.items.forEach((item) => { const drag = useDrag(() => ({ type: "li", collect: (monitor) => ({ isDragging: monitor.isDragging() }) })); const [{ isDragging }, dragRef] = drag; drags[item.title] = drag; itemList.push( <li style={{ border: "red 1px solid" }} ref={dragRef} key={item.title}> {item.title} </li> ); }); Si desea verificar, por ejemplo, si se está arrastrando un li en particular, accedería a él a través de su título (deberían ser únicos), por ejemplo, para el li que tiene el título "li1" :
console.log(drags["li1"][0].isDragging);