React 中的 insertRow() 和 appendChild() 等效

Question

我正在尝试在 React 中使用此代码：

export const JsonToTable = (jsonArr) => {

var cols = [];

for (var i = 0; i < jsonArr.length; i++) {

    for (var key in jsonArr[i]) {

        if (cols.indexOf(key) === -1) {

            cols.push(key);

        }

    }

}

var table = document.createElement("table");

var tr = table.insertRow(-1);             

for (var i = 0; i < cols.length; i++) {

    var th = document.createElement("th"); 

    th.innerHTML = cols[i];

    tr.appendChild(th);

}

 for (var i = 0; i < jsonArr.length; i++) {

     tr = table.insertRow(-1)

     for (var j = 0; j < cols.length; j++) {

         var tabCell = tr.insertCell(-1);

         tabCell.innerHTML = jsonArr[i][cols[j]];

     }

 }

 return table;

}

但是 React 抱怨这些方法：

insertRow()

appendChild()

innerHTML

我知道innerHTML 的等价物是dangerouslySetInnerHTML 但我不想使用它。如果我按原样运行此代码，则会得到返回的对象（表）不是 React 类型的错误。如何将此函数编写为 React 组件？我想要实现的是从 json 动态创建一个表。如果有另一种方法可以实现这一点，我也可以研究一下。谢谢。

Answer 1

将要在表格中呈现的数据放入组件的状态。当你想改变它时，改变状态。render 函数会自动更新 DOM。就此而言，因为看起来您并没有在内部对其进行更改……只需将解析后的 JSON 作为道具传递即可。您甚至可以使用函数组件。const Table = ({ array }) => (<table><tbody>{array.map(generateRow)}</tbody></table>);const generateRow = rowData => (<tr>{rowData.map(generateCell)}</tr>);const generateCell = cellData => (<td>{cellData}</td>);