7. 图（Graph）

7. 图（Graph）

示例场景：创建一个简单的图组件，允许用户添加节点和边，并显示图的结构。

import React, { useState } from "react";

function GraphComponent() {
  const [nodes, setNodes] = useState({});
  const [edges, setEdges] = useState([]);
  const [fromNode, setFromNode] = useState("");
  const [toNode, setToNode] = useState("");

  const addNode = (nodeName) => {
    if (!nodes[nodeName]) {
      setNodes({ ...nodes, [nodeName]: true });
    }
  };

  const addEdge = () => {
    if (nodes[fromNode] && nodes[toNode]) {
      setEdges([...edges, { from: fromNode, to: toNode }]);
    }
  };

  const renderGraph = () => {
    return (
      <div>
        {Object.keys(nodes).map((node) => (
          <div key={node}>
            {node} →{" "}
            {edges
              .filter((edge) => edge.from === node)
              .map((edge) => edge.to)
              .join(", ")}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div>
      <input
        type="text"
        placeholder="节点名称"
        onChange={(e) => addNode(e.target.value)}
      />
      <input
        type="text"
        placeholder="起点节点"
        value={fromNode}
        onChange={(e) => setFromNode(e.target.value)}
      />
      <input
        type="text"
        placeholder="终点节点"
        value={toNode}
        onChange={(e) => setToNode(e.target.value)}
      />
      <button onClick={addEdge}>添加边</button>
      <h2>图结构:</h2>
      {renderGraph()}
    </div>
  );
}

export default GraphComponent;