React-dnd: Agregue soporte para React 16.3 createRef tipo de ref

Creado en 3 abr. 2018  ·  13Comentarios  ·  Fuente: react-dnd/react-dnd

El uso de connectDragSource con un elemento que usa la nueva API createRef (introducida en React 16.3.0) en lugar de las referencias de devolución de llamada hace que la aplicación se bloquee con el error: TypeError: previousRef is not a function .

https://github.com/facebook/react/pull/12162

enhancement

Comentario más útil

Mismo problema. ¿Debo volver a usar la antigua referencia de devolución de llamada, o hay alguna manera de evitar esto?

Todos 13 comentarios

Esto es lo que genera el navegador:

    return (0, _react.cloneElement)(element, {
        ref: function ref(node) {
            newRef(node);

            if (previousRef) {
                previousRef(node); // << fails with new refs
            }
        }
    });

Mismo problema. La primera vez que finalmente tengo la oportunidad de usar las nuevas referencias y react-dnd está en el camino.

A largo plazo, no estoy seguro de todo el modelo react-dnd de usar findDOMNode y reemplazar la ref. Cuando React tiene un nuevo createRef y withRef. Nueva API forwardRef . Y varias API están comenzando a hacer uso de accesorios de renderizado.

Pero por ahora debería ser suficiente verificar si previousRef es un objeto con una propiedad current y establecer eso en lugar de llamarlo como una función.

¿Alguien tiene alguna solución para esto, mientras sigue usando createRef ()?

Puedo profundizar en esto más tarde, pero una caja de arena que demuestre lo que estás buscando sería genial aquí.

Yo también estoy enfrentando el mismo problema.
@darthtrevino https://codesandbox.io/s/733onvqwl6 tal vez este sandbox ayude.

Mismo problema. ¿Debo volver a usar la antigua referencia de devolución de llamada, o hay alguna manera de evitar esto?

+1
el uso de React.createRef() y ref.current bloqueó la aplicación.

¿Cuándo se solucionará esto?

Todavía no arreglado: /

Me tomaré un tiempo después de reaccionar-conf para investigar esto.

Pude usar una solución alternativa como se sugirió encapsulando el div de referencia dentro de otro div en blanco.
ejemplo:

 <div>
        <div
          style={{
            position: "relative",
            borderStyle: "dashed",
            width: 300,
            height: 200,
            position: "relative"
          }}
          ref={this.myRef}
        />
      </div>

👍 cualquier actualización sobre este @darthtrevino. sería genial escuchar una actualización

@darthtrevino Encontró el mismo problema, ¿podríamos obtener alguna ETA en la solución?

Debería ser hoy, creo. Avísame si hay algún problema con la versión que corté más tarde

¿Fue útil esta página
0 / 5 - 0 calificaciones