主页 / 问题 / 1450547
Accepted
Maria Avanova
Asked:2022-09-21 18:37:17 +0800 CST2022-09-21 18:37:17 +0800 CST

在 React JS 中可视化表格组件之间的数据关系

  • 772

我正在可视化两个表的数据：

const json ={
  "tables": [
    {
      "tableName": "One",
      "coordinates": {
        "x": "100",
        "y": "100"
      },
      "columns": [
        {"name": "smthLike",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "@MainColumn",
            "type": "integer",
            "typeFormat": "int64",
            "example": "",
            "descriptor": "codePlatform"}
      ]
    },
    {
      "tableName": "Two",
      "coordinates": {
        "x": "200",
        "y": "200"
      },
      "columns": [
        {"name": "codePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "namePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""}
      ]
    }
  ]
}
введите сюда код

在我的工作中，我使用 react-xarrows 库代码，示例 4：https ://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark

表具有名称描述符键。如果描述符与名称匹配（在本例中为 codePlatform），则数据链接箭头应从具有 codePlatform 的字段延伸到描述符为 (@MainColumn) 的字段。

我试图开出这样的条件，但到目前为止它不起作用。要画一个箭头，你需要给它一个起点和一个终点。告诉我，如何在 Column 字段组件中编写这样的条件？

import React from "react";
import styles from "./Column.module.css";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";

export const Column = ({ column, index }) => {
  const { name, descriptor } = column;

  const line = {
    from: "",
    to: "",
  };

  return (
    <>
      <div className={styles.ColumnContainer}>
        {name}: {descriptor}
      </div>
    </>
  );
};

表格组件代码：

import Draggable from 'react-draggable';
import React from 'react';
import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';
import { Column } from '../Column/Column';

export const DraggableBox = ({table, key, reference = undefined, id = undefined, ...style }) => {
  const {tableName, coordinates} = table;
  
  const updateXarrow = useXarrow();
  
  //if (initialOffset) moreStyle = { position: 'absolute', left: initialOffset.x, top: initialOffset.y };
  return (
    <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
      <div ref={reference} id={id} style={{position: 'absolute', left: coordinates.x + 'px', top: coordinates.y + 'px', border: '2px solid'}}>
      <p>Название: {tableName}</p>
      <div>
        {table.columns.map((column, index) => (
          <Column table={table} column={column} key={index} />
        ))}
      </div>
      </div>
      
    </Draggable>
  );
};
введите сюда код

和一个我迭代整个数据数组的组件：

import { Table } from "../Table/Table";
import styles from "./Tables.module.css";
import tableData from "../utils/all_db_schema.json";

export const Tables = () => {
  const [tableState, setTableState] = useState(tableData);

  return (
    <>
      {tableState.map((elem, index) => (
        <div
          className={styles.AreaContainer}
          key={index}
          style={{ color: elem.color }}
        >
          <p>Имя: {elem.groupName}</p>
          <div className={styles.ClassesContainer}>
            {elem.tables.map((table, index) => (
              DraggableBox table={table} key={index} />
            ))}
          </div>
        </div>
      ))}
    </>
  );
};
reactjs

0 个回答

  1. Best Answer

    react-xarrows 文档说字符串 可以充当and ，所以我更喜欢使用它们（必须通过整个应用程序），它们是唯一的 id 就足够了（在整个应用程序中！），我输入了它们在列数据中，例如：startenduseRefselfId

    {
  name: "smthLike",
  type: "string",
  typeFormat: "",
  example: "",
  descriptor: "",
  selfId: "box1" <--- добавляем Id (уникальное среди всех)
},

    创建列时，它被id分配给一个元素：

    export const Column = ({ column, index }) => {
  const { name, descriptor, selfId } = column;
  return (
    <div id={selfId} className={styles.ColumnContainer}> // Присваиваем id
      {name}: {descriptor}
    </div>
  );
};

    selfId链接本身的存储可以以完全不同的方式组织，所以我没有做这部分，它可以是一个单独的数组，这将简化渲染的解析，或者这个信息可以与它一起存储在一个列

    在表格中，我们显示所有可用的箭头

    <Xarrow start="box1" end="box3" />

    拖动onMouseMove={() => setUpd(!upd)}更新可以通过任何其他方式进行更新，因为此处使用的方法可能会影响性能。

    我见过这样的更新方式，或许它有它的优点，但是这一切都是为扁平结构设计的（当没有组件嵌套时），即 目前的情况不同。

    const [, reRender] = useReducer(() => ({}), {});
const renderCount = useRef(0);
useEffect(() => {
   renderCount.current += 1;
   if (renderCount.current === 2) {
     reRender();
     renderCount.current = 0;
   }
});

    不幸的是updateXarrow，由于DraggableBox某种原因，它不会导致更新。

    export const Tables = () => {
  const [upd, setUpd] = useState(false);

  return (
    .........        
    <div
       onMouseMove={() => setUpd(!upd)} // Обновляем при движении мыши
    >
     .........
      <div className={styles.ClassesContainer}>
        {elem.tables.map((table, index) => (
          <DraggableBox table={table} key={index} />
        ))}
        <Xarrow start="box1" end="box3" /> // Cтрелки
      </div>
     .........
 );

    在此处输入图像描述

    链接到具有上述更改的沙箱（组件文件、导入已稍作修改！）

    • 0

相关问题