javascript - React 中的 insertRow() 和 appendChild() 等价物
问题描述
我正在尝试在 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 的等价物是危险的SetInnerHTML,但我不想使用它。如果我按原样运行此代码,则会收到对象返回(表)不是 React 类型的错误。如何将此函数编写为 React 组件?我想要实现的是从 json 动态创建一个表。如果有其他方法可以实现这一点,我也可以研究一下。谢谢。
解决方案
将要在表格中呈现的数据放入组件的状态中。
当你想改变它时,改变状态。
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>);
推荐阅读
- android - 如何在 Android 中使用片段创建可滚动模板
- go - 在不同的 goroutine 中替换字符串的值时是否需要互斥锁?
- sql - 如何分隔字符串并插入表格?
- javascript - 有没有办法在对象解构中使用数组内容
- hortonworks-data-platform - 无法在 HDP 3.0.1 中启动 Apache Kylin
- unit-testing - 需要帮助区分模拟和测试驱动程序
- python - Python matplotlib改变x轴的主要单位比例
- angular - Angular scrollPositionRestoration 反向工作
- asp.net - 无法从 ASP.NET MVC 应用程序调用 API?
- python - 尽管模块安装在 python 环境中,VSCode 给出错误“没有名为 sqlalchemy 的模块”