@boxe

Как по клику на гео-метку передать данные другому компоненту?

Есть реакт-компонент Яндекс.Карты. Использую react-yandex-maps. Есть вот такой код вывода отдельной метки:

import React from 'react';
import { YMaps, Map, GeoObject } from 'react-yandex-maps';

import { dataPlaces as listPlaces } from './data';

const mapState = { center: [55.76, 37.64], zoom: 12.1, controls: [] };

const YMap = () =>
  <YMaps>
    <Map state={mapState}>

      {listPlaces.map(place =>

      <GeoObject
        geometry={{
          type: 'Point',
          coordinates: place.coords.array,
        }}
        properties={{
          hintContent: place.name,
        }}
        options={{
          preset: 'islands#blackStretchyIcon',
        }}
      />

      )}

    </Map>
  </YMaps>;

export default YMap;


Как сделать так, чтобы по клику на саму метку показывался другой компонент с данными об именно этой метке? Данные общие из файла .data/. Подскажите, пожалуйста?
  • Вопрос задан
  • 226 просмотров
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Предположим, что при клике вы можете передавать некий id (любой атрибут, который точно определяет ваш "другой компонент").
Предположим, что "другой компонент" - можно сделать модальным окном, значит для того, чтобы в нем отобразить данные, ему лишь достаточно знать этот айди (чтобы сделать запрос за подробными данными).
Следовательно после клика вы устанавливаете значение myId=_вашему_айди в state родителя и это значение передаете вниз потомку "другому_компоненту".
Либо используете redux и гоняете данные через диспетчер.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы