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.

React.Children no muestra los hijos.

30 Jul, 2023 Programación

Quiero usar react-native-maps-clustering, pero este solo acepta marcadores que sean hijos directos de mapas.

Como en el ejemplo:

<mapview>
  <marker></marker>
  <marker></marker>
</mapview>

En mi caso, mis marcadores están en otro archivo anidado en otros elementos.

<mapview>
  <markerslayer></markerslayer>
</mapview>

MarkersLayer.tsx

<fragment>
  <trajectory></trajectory>
 <fragment>
  <marker>
     <markerstyle></markerstyle>
  <marker></marker>
 </marker></fragment>
</fragment>

Prueba: En la biblioteca – ClusteredMapView.js – l.84

     propsChildren.forEach((child, index) => {
        //mi prueba
        if (child.type?.name == "MarkersLayer"){
          console.log('Yo soy MarkersLayer')
          React.Children.forEach(child, ch => {
            console.log("child MarkersLayer", ch)
          })
        }else if (child.props.coordinate){
          console.log("Soy un marcador", child)
        }
         //fin
        if (isMarker(child)) {
          rawData.push(markerToGeoJSONFeature(child, index));
        } else {
          otherChildren.push(child);
        }
      });

Hijos en MapView:

enter image description here

Hijos en MarkerLayer:

enter image description here

Prueba: En mi componente MarkerLayer

  const propsChildren = useMemo(
    () => React.Children.toArray(children),
    [children],
  );

Resultado:

enter image description here

La biblioteca utiliza React.Children para encontrar los hijos contenidos en MapView, pero no puedo obtener los marcadores en MarkerLayer.

Gracias a las personas que leen esta publicación y por las respuestas 🙂

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, la biblioteca react-native-maps-clustering solo acepta marcadores que sean hijos directos del componente MapView. Si tienes marcadores anidados en otros elementos, como en tu caso con el componente MarkersLayer, la biblioteca no podrá encontrarlos.

    Una posible solución sería extraer los marcadores del componente MarkersLayer y renderizarlos como hijos directos del componente MapView. Puedes hacer esto pasando una función como una propiedad a MarkersLayer, que devuelva un array de marcadores. Luego, en el método render de MarkersLayer, puedes llamar a esta función para obtener los marcadores y renderizarlos.

    Por ejemplo, así es como puedes modificar tu código para extraer los marcadores de MarkersLayer y renderizarlos en MapView:

    // MapView.tsx
import { Marker } from 'react-native-maps';
import MarkersLayer from './MarkersLayer';

const MyMapView = () => {
  const getMarkers = () => {
    // Devuelve un array de marcadores para renderizar en MapView
    return [
      <marker key="{1}" coordinate="{{" latitude:="" 37.78825,="" longitude:="" -122.4324="" }}=""></marker>,
      <marker key="{2}" coordinate="{{" latitude:="" 37.78925,="" longitude:="" -122.4324="" }}=""></marker>,
    ];
  };

  return (
    <mapview>
      {getMarkers()}
      <markerslayer getmarkers="{getMarkers}"></markerslayer>
    </mapview>
  );
};

export default MyMapView;

    // MarkersLayer.tsx
const MarkersLayer = ({ getMarkers }) => {
  return (
    <fragment>
      <trajectory></trajectory>
      {getMarkers()}
    </fragment>
  );
};

export default MarkersLayer;

    En este ejemplo, pasamos la función getMarkers como una propiedad a MarkersLayer. En MarkersLayer, llamamos a esta función para renderizar los marcadores en el Fragment.

    En MyMapView, llamamos a getMarkers para renderizar los marcadores directamente en MapView. De esta manera, la biblioteca react-native-maps-clustering podrá encontrar los marcadores y agruparlos correctamente.

    Espero que esto te ayude. Hazme saber si tienes alguna pregunta.

Comments are closed.