Reaccionar compartiendo datos entre componentes sin componente de recarga -- javascript campo con reactjs camp Relacionados El problema

React Sharing Data Between Components without reloading component


1
vote

problema

Español

Tengo un componente de mapa, donde el usuario seleccionará imágenes y otro componente en el lado para usar los datos de la selección. Pero, cuando configuré el contexto en el componente del mapa, vuelve a cargar y el mapa para restablecer. - ¿Cómo bloquearía este componente de recargar, o usaría un método para compartir estos datos sin activar la recarga?

Ejemplo Use los botones de zoom / Mousewheel para ver el problema de reinicio.

Pensé que la forma de hacerlo es usar un componente de contexto y pasar las funciones como valores en el proveedor

  import React, { useState, createContext } from "react"; export const ImageContext = createContext();  export const ImageProvider = (props) => {     const [images, setImages] = useState([]);     return <ImageContext.Provider value={[images,setImages]} >     {props.children}     </ImageContext.Provider>;  };   

Envolviendo mi aplicación en el contextprovider (los componentes son hermanos, no como una relación entre padres y padres)

  @blue: #1f6ea9; @white: #f5f5f5;  .square(@size, @color) {     width: @size;     height: @size;     background-color: @color; } 0  

I importando en mi @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 111111111 / @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 2 Como a continuación

  @blue: #1f6ea9; @white: #f5f5f5;  .square(@size, @color) {     width: @size;     height: @size;     background-color: @color; } 3  

Luego, configurando el contexto a continuación cuando el usuario realiza la entrada al MAP

  @blue: #1f6ea9; @white: #f5f5f5;  .square(@size, @color) {     width: @size;     height: @size;     background-color: @color; } 4  

Descripción de los problemas:

  1. Necesito obtener datos de selección en el mapa y pasarlo al @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 5 Cada vez que el usuario realiza una entrada sin volver a cargar el mapa, pero mantener la funcionalidad normal de reaccionar la recarga del @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 6 cuando hay nuevos datos disponibles en el estado
  2. Necesito pasar información del @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 7 al @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 8 para procesar dentro del mapa, pero sin volver a cargar el mapa.

Empiezo a obtener el contexto de la impresión no es la herramienta adecuada para esto, ¿debería estar usando algo más? He examinado en caso de recomponentupdato y @blue: #1f6ea9; @white: #f5f5f5; .square(@size, @color) { width: @size; height: @size; background-color: @color; } 9 , pero la documentación establece que son más "sugerencias" y no garantizan prevenir una recarga ...

Original en ingles

I have a map component, where the user will select images and another component on the side to use the data from the selection. but, when I set context on the map component it reloads and the map to reset. - how would i block this component from reloading, or use a method to share this data without triggering reload?

example use the zoom buttons / mousewheel to see the reset issue.

I thought the way to do this is using a context component, and passing the functions as values in the provider

import React, { useState, createContext } from "react"; export const ImageContext = createContext();  export const ImageProvider = (props) => {     const [images, setImages] = useState([]);     return <ImageContext.Provider value={[images,setImages]} >     {props.children}     </ImageContext.Provider>;  }; 

wrapping my app in the contextprovider (the components are siblings, not child-parent relationship)

return ( <div id="App">         <ImageProvider>              ...              <SidePanel />               <WebMapView />              ...           </ImageProvider>     </div>   ); } 

I import into my mapcomponent the context and Usecontext as below

import { ImageContext } from "./ImageContext"; const [images, setImages] = useContext(ImageContext); 

then setting the context as below when the user makes input to the map

export const WebMapView = () => { ...     setImages(results.features); ... } 

Description of issues:

  1. I need to get selection data on the map and pass it TO the sidecomponent each time the user makes an input without reloading the map, but keeping the normal functionality of react reloading the sidepanel when new data is available in the state
  2. I need to pass information FROM the sidepanel to the mapcomponent to process within the map, but without reloading the map.

I start to get the impression context is not the right tool for this, should i be using something else? i have looked into shouldComponentUpdate and purecomponents, but the documentation states that they are more 'suggestions' and don't guarantee preventing a reload...

     

Lista de respuestas


Relacionados problema

1  ¿Cómo agregar a una aplicación de reacción usando Vanilla Javascript?  ( How to append to a react app dom using vanilla javascript ) 
Estoy creando una extensión de cromo que me permite resaltar texto desde cualquier sitio web. solo para darte una idea public String showCourse(Course c)...

1  ¿Cómo puedo poner un formulario de reactjs-bootstrap y la etiqueta H1 lado a lado  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
Quiero colocar mi grupo de formulario y mi etiqueta H1 lado a lado horizontalmente. He intentado usar la pantalla: bloque en línea y otras cosas, pero sin sue...

0  Reaccionar - ¡Niños que acceden a los padres estado demasiado pronto?  ( React children accessing parents state too early ) 
Cuando utilice una devolución de llamada de un niño a App.js, la función de devolución de llamada en App.js establece el estado de un elemento. En la misma fu...

2  Configuración de reaccionar StyleGuidist con Siguiente.js y TypeScript  ( Setting up react styleguidist with next js and typescript ) 
Estoy tratando de configurar reaccionar StyleGuidist con Siguiente.js y TypeScript, pero sigo caminando en problemas. My actualyguide.config.js se ve así: ...

0  La función de despacho simulada no se llama  ( Mock dispatch function is not called ) 
Estoy escribiendo una prueba para el creador de acción de ASYNC, pero encontró un problema donde se declara "Función de simulacros esperada para que se haya ...

0  Integración de la solicitud de Axios basada en clase al código basado en gancho  ( Integrating class based axios request to the hook based code ) 
¿Cómo puedo integrar esta solicitud de Axios basada en clase al otro código basado en gancho que obtiene datos de un archivo JSON? Básicamente, quiero reempla...

84  Los manipuladores de eventos en reaccionan componentes sin estado  ( Event handlers in react stateless components ) 
Tratando de averiguar una forma óptima de crear manipuladores de eventos en reaccionar componentes sin estado. Podría hacer algo así: const myComponent = (...

0  Reacciona URL de panel compartable  ( React sharable panel url ) 
Considerar mi siguiente fragmento. En este momento, haga clic en el botón, se abre un DIV-THE que carga otro componente. La URL es simplemente ' http: /// loc...

0  Cómo enviar un formulario en reaccionar  ( How to submit a form in react ) 
Quiero saber si es posible enviar un formulario que no está en el componente reaccionar por Fetch en el componente de reacción. <form action="json.bc" clas...

0  Haga un bucle para mostrar el objeto de datos de la API en Render usando gráficos reaccsjs  ( Make a for loop to show data object from api in render using charts reactjs ) 
Necesito mostrar algunos datos de la API en el gráfico reaccionar ( https : //canvasjs.com/react-charts/chart-index-data-label/ ) Esta es mi API en frente: ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos