javascript - react 表与从/到映射

Question

我正在尝试在 React 中创建一个表，该表是使用字典映射数组动态创建的。每个字典都有键 id、old、new 和 support。旧描述左侧的 from 条目。 New 描述了顶部的 to header。支持度是出现在 Y 或 N 两者交集处的值。问题是我见过的大多数示例都使用出现在每个项目中的固定 header ，但情况不一定如此。我还想按版本号升序排序。有没有办法在标题是动态的并且不一定出现在每个项目中的情况下实现这一目标。

const example = {"old": "3.0.10", "new": "3.5.1", "support": "Y"};

Answer 1

看看这是否适合你。

https://codesandbox.io/s/sparkling-water-y49ih

SNIPPET(代码与 CodeSandbox 相同):

function App() {
  const example = [
    { old: "3.0.10", new: "3.5.1", support: "Y" },
    { old: "3.0.10", new: "3.5.2", support: "Y" },
    { old: "3.0.10", new: "3.5.3", support: "Y" },
    { old: "3.0.10", new: "3.6.1", support: "N" },
    { old: "3.0.10", new: "3.6.2", support: "Y" },
    { old: "3.0.10", new: "3.7.0", support: "Y" },

    { old: "3.5.1", new: "3.5.2", support: "Y" },
    { old: "3.5.1", new: "3.5.3", support: "Y" },
    { old: "3.5.1", new: "3.6.1", support: "Y" },
    { old: "3.5.1", new: "3.6.2", support: "Y" },
    { old: "3.5.1", new: "3.7.0", support: "Y" },

    { old: "3.5.2", new: "3.5.3", support: "N" },
    { old: "3.5.2", new: "3.6.1", support: "Y" },
    { old: "3.5.2", new: "3.6.2", support: "Y" },
    { old: "3.5.2", new: "3.7.0", support: "Y" },

    { old: "3.5.3", new: "3.6.1", support: "Y" },
    { old: "3.5.3", new: "3.6.2", support: "N" },
    { old: "3.5.3", new: "3.7.0", support: "Y" },

    { old: "3.6.1", new: "3.6.2", support: "Y" },
    { old: "3.6.1", new: "3.7.0", support: "Y" },

    { old: "3.6.2", new: "3.7.0", support: "Y" }
  ];

  // GETTING ROWS EXCLUSIVE VALUES ('old' PROPERTY)
  // STORING INTO rowItems ARRAY AND SORTING ALPHABETICALLY
  let rowItems = [];

  example.forEach(item => {
    if (rowItems.indexOf(item.old) === -1) {
      rowItems.push(item.old);
    }
  });

  rowItems = rowItems.sort();

  // DO THE SAME FOR THE HEADER ITEMS ('new' PROPERTY)

  let headerItems = [];

  example.forEach(item => {
    if (headerItems.indexOf(item.new) === -1) {
      headerItems.push(item.new);
    }
  });

  headerItems = headerItems.sort();

  // NOW WE WILL SEPARATE THE OBJECTS INTO DIFFERENT ARRAYS
  // EACH ARRAY WILL GROUP EVERY OBJECT WITH THE SAME 'old' PROPERTY VALUE
  // THE ARRAYS WILL BE STORED INTO THE NESTED OBJECT separateRowObjects
  // EACH ARRAY WILL BE STORED UNDER ITS CORRESPONDING 'old' KEY

  /* 

    separateRowObjects {
      3.5.1 : [array with all the objects with 'old' === 3.5.1],
      3.5.2 : [array with all the objects with 'old' === 3.5.2],
      and so on...
    }

  */
  const separateRowObjects = {};

  // Initialize arrays for each property
  rowItems.forEach(row => (separateRowObjects[row] = []));

  rowItems.forEach(row => {
    for (let i = 0; i < example.length; i++) {
      if (example[i].old === row) {
        separateRowObjects[row].push(example[i]);
      }
    }
  });

  // GENERATING THE 1ST ROW WITH THE HEADERS
  const tableHeaderItems = headerItems.map(item => <th key={item}>{item}</th>);

  // FUNCTIONS TO MAP ROW AND HEADER AND RETURN THE 'support' VALUE
  function getObject(row, header) {
    const aux = separateRowObjects[row].filter(item => item.new === header);
    if (aux.length > 0) {
      return aux[0].support;
    } else {
      return "";
    }
  }

  // AUXILIAR FUNCTION TO GENERATE THE <td>'s FOR THE 'support' VALUES
  function createTds(rowItem) {
    let tdArray = [];
    for (let i = 0; i < headerItems.length; i++) {
      tdArray.push(<td key={i}>{getObject(rowItem, headerItems[i])}</td>);
    }
    return tdArray;
  }

  // FUNCTION TO GENERATE THE TABLE ROWS <tr>
  const tableRowItems = rowItems.map(item => (
    <tr key={item}>
      <td>{item}</td>
      {createTds(item)}
    </tr>
  ));

  return (
    <React.Fragment>
      <table>
        <tr>
          <th>From/To</th>
          {tableHeaderItems}
        </tr>
        {tableRowItems}
      </table>
    </React.Fragment>
  );
}

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

th {
  width: 50px;
}

td {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"/>