Как установить HTML-идентификатор для элемента холста, отображаемого с реагирующей конвой - PullRequest
Новая
       44

Как установить HTML-идентификатор для элемента холста, отображаемого с реагирующей конвой

0 голосов
/ 16 мая 2019

Я использую реактив-конву в проекте для рендеринга элементов HTML5-холста: 

import desktop_tea_1 from "./previews_desktop/tea_1.png";

const DesktopTea1 = () => {
    const [desktop_tea_1_const] = useImage(desktop_tea_1);
    return <Image image={desktop_tea_1_const} width={600} height={600}  />;
};

(...) 

<Stage width={600} height={600}>
    <Layer ref="DesktopTea1">
        <DesktopTea1/>
    </Layer>
</Stage>

Теперь я хочу, чтобы HTML-вывод имел идентификатор (myId) , например: 

<canvas width="600" height="600" id="myId"></canvas>

Я могу найти только konva-id , но ничего для установки HTML-идентификатора.

1 Ответ

0 голосов
/ 20 мая 2019

Лучше использовать как можно меньше слоев.Поэтому я не рекомендую использовать многие из них для вашего приложения.

Нет API Konva для установки идентификатора для элемента canvas слоя.Но вы можете сделать это вручную: 

const App = () => {
  const layerRef = React.useRef(null);
  React.useEffect(() => {
    layerRef.current.getCanvas()._canvas.id = 'some-id';
  }, []);

  return (
    <Stage width={600} height={600}>
      <Layer ref={layerRef}>
        <DesktopTea1/>
      </Layer>
    </Stage>
  );
}

Если вы не собираетесь использовать слишком много слоев, css :nth-of-type() может работать просто отлично.

...