Запущенный cytoscape внутри реагирует с useEffect - PullRequest
Новая
       8

Запущенный cytoscape внутри реагирует с useEffect

1 голос
/ 08 февраля 2020

У меня есть следующий простой код: 

export const App = () => {
  useEffect(() => {
    const config = {
      container: document.getElementById("cy"),
      style: [
        {
          selector: "node",
          style: { content: "data(id)" }
        }
      ],
      elements: [
        { data: { id: "n1" } },
        { data: { id: "n2" } },
        { data: { id: "e1", source: "n1", target: "n2" } }
      ]
    };
    cytoscape(config);
  }, []);
  return <div id="cy" />;
};

Страница пуста .... https://stackblitz.com/edit/react-ts-vo5hv6

Как это исправить?

Спасибо

1 Ответ

1 голос
/ 08 февраля 2020

Взгляните на хук useRef (https://reactjs.org/docs/hooks-reference.html#useref) вместо непосредственного использования document.getElementById ("cy"). Также похоже, что вам нужно установить высоту для вашего элемента контейнера, в противном случае он не виден.

Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга. 

export default function App() {
  const containerRef = useRef();

  useEffect(() => {
    const config = {
      container: containerRef.current,
      style: [
        {
          selector: "node",
          style: { content: "data(id)" },
        },
      ],
      elements: [
        { data: { id: "n1" } },
        { data: { id: "n2" } },
        { data: { id: "e1", source: "n1", target: "n2" } },
      ],
    };

    cytoscape(config);
  }, []);

  return (
    <div>
      <h1>Hello cytoscape</h1>
      <div ref={containerRef} style={{ height: "300px" }} />
    </div>
  );
}
...