Как сделать SVG-схему поезда кликабельной?

Чтобы сделать SVG-схему поезда кликабельной в React, вам потребуется использовать обработчики событий и состояние компонента.

1. Импортируйте необходимые компоненты React:

import React, { useState } from 'react';

2. Создайте компонент, отображающий SVG-схему поезда:

const TrainScheme = () => {
  return (
    <svg>
      {/* здесь размещаете свою SVG-схему поезда */}
    </svg>
  );
};

3. Создайте состояние компонента, чтобы отслеживать, какие элементы SVG были нажаты:

const TrainScheme = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  
  const handleClick = (event) => {
    const elementId = event.target.id;
    setSelectedElement(elementId);
  };

  return (
    <svg>
      {/* здесь размещаете свою SVG-схему поезда, давая каждому элементу уникальный id */}
    </svg>
  );
};

4. Добавьте обработчики событий для клика на каждый элемент SVG:

const TrainScheme = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  
  const handleClick = (event) => {
    const elementId = event.target.id;
    setSelectedElement(elementId);
  };

  return (
    <svg>
      <circle id="wagon1" cx="50" cy="50" r="30" onClick={handleClick} />
      <circle id="wagon2" cx="100" cy="50" r="30" onClick={handleClick} />
      {/* здесь размещаете другие элементы SVG и добавляете обработчики событий */}
    </svg>
  );
};

5. Отображайте некоторую информацию о выбранном элементе SVG:

const TrainScheme = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  
  const handleClick = (event) => {
    const elementId = event.target.id;
    setSelectedElement(elementId);
  };

  return (
    <div>
      <svg>
        <circle id="wagon1" cx="50" cy="50" r="30" onClick={handleClick} />
        <circle id="wagon2" cx="100" cy="50" r="30" onClick={handleClick} />
        {/* здесь размещаете другие элементы SVG и добавляете обработчики событий */}
      </svg>
      {selectedElement && <p>Выбран элемент: {selectedElement}</p>}
    </div>
  );
};

Теперь, когда элемент SVG будет нажат, его id будет сохраняться в состоянии компонента, и информация о выбранном элементе будет отображаться под SVG-схемой поезда. Вы можете расширить этот пример, добавив дополнительную логику или использовав более сложные элементы SVG с атрибутами для более точного определения кликнутого элемента.