主页 / 问题 / 1447917
Accepted
Maria Avanova
Asked:2022-09-12 21:17:33 +0800 CST2022-09-12 21:17:33 +0800 CST

渲染包含 XY 坐标的 json 数据（表格）（React JS）

  • 772

我正在用两个表渲染 json，每个表都有 x y 坐标。我需要根据这些坐标来绘制这些表格。

"tables": [
{ "tableName": "One",
"coordinates": {
"x": "100",
"y": "100"
},
"columns": [{},{}]
},
{"tableName": "Two",
"coordinates": {
"x": "200",
"y": "200"
},
"columns": [{},{}]
}]

使用 map 方法遍历表后，我将数据“打包”到 . 我正在尝试将 style={{}} 分配给具有这些坐标的容器，但它们是相互叠加的。

    export const Table = ({table}) => {
const {tableName, coordinates} = table;
return (
<div style={{position: "absolute", left: coordinates.x, top: coordinates.y}}>
<p>{tableName}</p>
<div>{table.columns.map((el) => (
<div>{columnName}</div>))}
</div>
</div>
);
};

在我的情况下如何安排表格的正确坐标？

javascript

0 个回答

  1. Best Answer

    当样式通过 React 数字设置时，如果它们意味着像素应该是数字，而不是字符串，或者包含后缀px。在此示例中，我使用了两个选项：

    <div style={{position: "absolute", left: +coordinates.x, top: coordinates.y + "px"}}>


    const json ={
  "tables": [
    {
      "tableName": "One",
      "coordinates": {
        "x": "100",
        "y": "100"
      },
      "columns": [
        {},
        {}
      ]
    },
    {
      "tableName": "Two",
      "coordinates": {
        "x": "200",
        "y": "200"
      },
      "columns": [
        {},
        {}
      ]
    }
  ]
}

const Table = ({table}) => {
  const {tableName, coordinates} = table;
  return (
    <div style={{position: "absolute", left: +coordinates.x, top: coordinates.y + "px"}}>
      <p>{tableName}</p>
      <div>{table.columns.map((el) => (
        <div>{el.columnName}</div>))}
      </div>
    </div>
  );
};

const App = () => {
   return (
    <div>
      {json.tables.map(table => Table({table}))}
    </div>
   )
}

const root = ReactDOM.render(
  <App/> ,document.getElementById('root')
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

    • 0

相关问题