[英]insertRow() and appendChild() equivalent in React
我正在尝试在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动态创建表。 如果还有另一种方法可以实现这一点,我也可以研究一下。 谢谢。
将要呈现在表中的数据放入组件的状态。
当您要更改它时,请更改状态。
渲染功能将自动更新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>);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.