es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Biblioteca de componentes React-dnd

10 Jun, 2023 Programación

Ediciones >>>

Edición::Creé un ejemplo en git para mayor claridad https://github.com/suityou01/wgas

EdiciónEdit::Posible duplicado de esta pregunta sin respuesta hace 12 meses
https://stackoverflow.com/questions/65428503/is-there-a-way-to-share-react-context-between-packages

EdiciónEditEdit::Agregué un commit para demostrar el uso de lo que actualmente estoy llamando “React Context Provider Value Chaining”

Ver la captura de pantalla a continuación
enter image description here

Entonces esto está utilizando un contexto de react creado en el paquete de nivel superior, y un contexto anidado en el subpaquete con un valor compartido

const App = () => {
  return (
    <CustomContext.Provider value={sharedValue}>
      <SubCustomContext.Provider value={sharedValue}>
        <SamePackageExampleComponent/>
        <ExampleComponent />
      </SubCustomContext.Provider>
    </CustomContext.Provider>
  )
}

<<<Ediciones

Estoy tratando de crear una biblioteca de componentes de react que utiliza react-dnd como dependencia en nivel del par.

En mi aplicación que importa la biblioteca y sus componentes, los componentes están envueltos en un proveedor DND.

Cuando lo ejecuto, obtengo

Se esperaba el contexto de arrastrar y soltar

Por lo tanto, es como si no estuviera disponible el contexto proveedor en el componente del paquete.

Funciona si utilizo un componente creado en la aplicación local.

Por lo tanto, la estructura del proyecto se ve como:

package.json (Con react, react-dnd y html5backend como dependencias de desarrollo)
  /src/index.js (Esto importa component.js y lo envuelve en un proveedor dnd)
  /package/package.json
  /package/component.js <-- El contexto no está disponible en este componente

Este es el código en la aplicación:

const App = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <SortedList data={json} />
    </DndProvider>
  )
}

Este es el código del componente:

export function SortedListItem(props){

  const { data } = props
  const [{ opacity }, dragRef] = useDrag(
      () => ({
        type: "CARD",
        item: "1",
        collect: (monitor) => ({
          opacity: monitor.isDragging() ? 0.5 : 1
        })
      }),
      []
    )
  return (
      <div ref={dragRef} >
          <li>{data.name}</li>
          {props.children}
      </div>
  )
}

Si el componente es parte de mi árbol, ¿por qué no está disponible el contexto si el nivel superior del árbol está envuelto?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para una Biblioteca de Componentes de React con React-DND y React Context

    Si estás creando una biblioteca de componentes de React que usa React-DND como una dependencia par, es posible que te encuentres con un problema en el que los componentes envueltos en un proveedor de DND no tienen acceso al contexto creado por la aplicación de nivel superior.

    Para resolver este problema, puedes pasar el contexto a través de props al proveedor de DND, y luego a los componentes que lo necesiten.

    Aquí tienes un ejemplo:

    1. Crea tu contexto de nivel superior en la aplicación:
    import React from 'react';

export const MyContext = React.createContext({ data: {} });
    1. Envuelve tu aplicación en el proveedor:
    import React from 'react';
import { MyContext } from './MyContext';

function App() {
  const data = { name: 'John Doe' };

  return (
    <mycontext.provider value="{{" data="" }}="">
      {/* Tu código de aplicación va aquí */}
    </mycontext.provider>
  );
}

export default App;
    1. Importa tu biblioteca de componentes y usa el proveedor de DND:
    import React from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { SortedListItem } from 'my-component-library';
import { MyContext } from './MyContext';

function App() {
  const data = { name: 'John Doe' };

  return (
    <mycontext.provider value="{{" data="" }}="">
      <dndprovider backend="{HTML5Backend}" context="{MyContext}">
        <sortedlistitem></sortedlistitem>
      </dndprovider>
    </mycontext.provider>
  );
}

export default App;
    1. Pasa el contexto a través de props al componente:
    import React, { useContext } from 'react';
import { useDrag } from 'react-dnd';
import { MyContext } from '../MyContext';

export function SortedListItem(props) {
  const { data } = useContext(MyContext);

  const [{ opacity }, dragRef] = useDrag({
    type: 'CARD',
    item: '1',
    collect: (monitor) => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  });

  return (
    <div ref="{dragRef}" style="{{" opacity="" }}="">
      <li>{data.name}</li>
      {props.children}
    </div>
  );
}

    Al pasar el contexto a través de props al proveedor de DND, y luego al componente, aseguras que el componente tenga acceso al contexto creado por la aplicación de nivel superior.

Comments are closed.