Question

我正在尝试在React中创建一个表，该表是用字典映射数组动态创建的。每个字典都有键ID，旧键，新键和支持键。旧描述左侧的from条目。 New在顶部描述了to标头。支持是出现在Y或N的交集处的值。问题是我见过的大多数示例都使用出现在每个项目中的固定标头，而不一定是这种情况。我还想按版本号升序排序。无论如何，在标题是动态的并且不一定出现在每个项目中的情况下，都可以做到这一点。

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

Answer 1

看看是否适合您。

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

SNIPPET（具有与CodeSandbox相同的代码）：

  NotificationCompat.Builder builder = new NotificationCompat.Builder(this, CHANNEL_ID);

        builder.setContentIntent(pendingIntent)
                .setSmallIcon(R.drawable.ic_launcher)
               // .setLargeIcon(BitmapFactory.decodeResource(res, R.drawable.ic_launcher))
               // .setTicker(res.getString(R.string.notification_title))
                .setAutoCancel(true)
                .setContentTitle(res.getString(R.string.notification_title))
                .setContentText(res.getString(R.string.notification_subject));


        notificationManager.notify(NOTIFICATION_ID, builder.build());
        Log.i(TAG,"Notifications sent.");

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

Answer 2

您尝试过吗？我以为您的值数组存储在values

下

    const rows = uniq(values.map(v => v.from))
    rows.sort()
    const columns = uniq(values.map(v => v.to))
    columns.sort()

    return (
        <table>
            <thead>
                <tr>
                    <th>FROM/TO</th>
                    {columns.map(column => (
                        <th key={column}>{column}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {rows.map(row => {
                    const items = columns.map(col => {
                        const value = values.find(v => v.from === row && v.column === col)
                        if (value) return value.support
                        else return ''
                    })
                    return (
                        <tr>
                            <th>{row}</th>
                            {items.map((item, i) => (
                                <td key={columns[i]}>{item}</td>
                            ))} 
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )

从/到映射的反应表

2 个答案: