运行 cytoscape 内部与 useEffect 反应

Question

我有以下简单代码：

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

我该如何解决？

谢谢

Answer 1

查看 useRef 挂钩 (https://reactjs.org/docs/hooks-reference.html#useref) 而不是直接使用 document.getElementById("cy")。看起来你还需要为你的容器元素设置一个高度，否则它是不可见的。

Refs provide a way to access DOM nodes or React elements created in the render method.

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>
  );
}

Answer 2

import React, { Component, useEffect, useRef } from "react";
import { render } from "react-dom";
import cytoscape from "cytoscape";

export const App = () => {
  const container = React.useRef<HTMLDivElement>(null);

  useEffect(() => {
    const config = {
      container: container.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={container} style={{ height: "300px" }} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

运行 cytoscape 内部与 useEffect 反应

Running cytoscape inside react with useEffect

cytoscape

reactjs