在 React 中创建复杂和动态的行跨度

Question

我尝试制作获取对象数组并根据数组中的对象生成具有动态行跨度的表的函数。 我尝试了很多解决方案，但都没有帮助。

这段代码我试过了，但没有继续，因为一开始效果不好

 const returnTabel = state => {
return state.map((item, index) => {
  return (
    <tr key={index}>
      {Object.keys(item).map((key, index) => {
        if (Array.isArray(item[key])) {
          return item[key].map((object, index) => {
            return Object.keys(object).map((i, index) => {
              if (Array.isArray(object[i])) {
              } else {
                return (
                  <tr>
                    <td>{object[i]}</td>
                  </tr>
                );
              }
            });
          });
        } else {
          return (
            <td rowSpan={2} key={index}>
              {item[key]}
            </td>
          );
        }
      })}
    </tr>
  );
});};

这是我的数据：

 const state = [
{
  name: 'Bill',
  info: [
    {
      hobby: 'Practice',
      field: [
        { type: 'Swim', hours: '6' },
        { type: 'Run', hours: '7' }
      ]
    },
    {
      hobby: 'Listen to music',
      field: [
        { type: 'Jazz', hours: '3' },
        { type: 'Electronic music', hours: '3' },
        { type: 'Hip hop', hours: '3' }
      ]
    }
  ],
  student: 'No'
},
{
  name: 'John',
  info: [
    {
      hobby: 'Practice',
      field: [
        { type: 'Swim', hours: '1' },
        { type: 'Run', hours: '2' }
      ]
    }
  ],
  student: 'Yes'
}]

我想用我的数据制作这张表

Answer 1

如果将数据映射到如下所示的行，则可以简化渲染映射：

[{"txt":"Bill","rowSpan":5},{"txt":"Practice","rowSpan":2},{"txt":"Swim"},{"txt":"6"},{"txt":"No","rowSpan":5}]
//OR
[null,{"txt":"Listen to music","rowSpan":3},{"txt":"Jazz"},{"txt":"3"},null]
//OR
[null,null,{"txt":"Run"},{"txt":"7"},null]

然后渲染简化为：

  return (
    <table border="1">
      {rows.map(cells =>  (
          <tr>
            {cells.map(cell => cell && <td rowSpan={cell.rowSpan}>{cell.txt}</td>)}
          </tr>
        )
      )}
    </table>
  );

---

工作示例

const data=[{name:"Bill",info:[{hobby:"Practice",field:[{type:"Swim",hours:"6"},{type:"Run",hours:"7"}]},{hobby:"Listen to music",field:[{type:"Jazz",hours:"3"},{type:"Electronic music",hours:"3"},{type:"Hip hop",hours:"3"}]}],student:"No"},{name:"John",info:[{hobby:"Practice",field:[{type:"Swim",hours:"1"},{type:"Run",hours:"2"}]}],student:"Yes"}];

const rowData = data.reduce((a, { name, info, student }) => {
  const rowSpan = info.reduce((a, { field }) => a + field.length, 0);

  let [firstCell, lastCell] = [name, student].map(txt => ({ txt, rowSpan }));

  info.forEach(({ hobby, field }, i) => {
    const rowSpan = field.length;

    let hobCell = { txt: hobby, rowSpan };

    field.forEach((f, j) => {
      const fieldCells = Object.values(f).map(txt => ({ txt }));

      if (j > 0) {
        hobCell = firstCell = lastCell = null;
      }
      const row = [firstCell, hobCell, ...fieldCells, lastCell];
      a.push(row);
    });
  });

  return a;
}, []);

console.log( rowData)

const Table = () => {
  const [rows] = React.useState(rowData);

  return (
    <table border="1">
      {rows.map((cells,i) =>  (
          <tr key={i}>
            {cells.map((cell,j) => cell && <td key={`${i}-${j}`} rowSpan={cell.rowSpan}>{cell.txt}</td>)}
          </tr>
        )
      )}
    </table>
  );
};
// Render it
ReactDOM.render(
  <Table />,
  document.getElementById("react")
);

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