我有一个 ReactJS HTML 表格组件,我使用 setState
方法更新它的内容(单元格值)。这是基本代码:
var Cell = React.createClass({
render: function () {
return (<td>{this.props.cellValue}</td>);
}
});
var Row = React.createClass({
render: function () {
return (<tr>{this.props.row}</tr>);
}
});
var Table = React.createClass({
getInitialState: function() {
return {
data: this.props.data
};
},
render: function () {
return (
<table>
{
this.state.data.map(function(row) {
var r = row.map(function(cell) {
return <Cell cellValue={cell}/>;
});
return (<Row row={r}/>);
})
}
</table>
);
}});
你会像这样使用它:
var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
<Table data={initialData} />,
document.getElementById('table')
);
大部分时间都是这样。我可以通过这样做来更改数据(在某个函数或其他地方):
var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
table.setState({data : newData});
如您所见,它在表格末尾添加了一行。但是,如果我尝试在此更新后设置初始数据,或者通过将 data
设置为较小的数组(例如 [[ 1, 2, 3], [4, 5, 6]]
应该删除最后一行):
table.setState({data : initialData});
我收到这个错误:
TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
它从哪里来?
最佳答案
一些浏览器(使用 Firefox 和 Chrome 测试)自动添加 <tbody>...</tbody>
标记到没有它们的 HTML 表格。将它们添加到我的表组件中可以解决问题:
render: function () {
return (
<table><tbody>
{
... same code as before ...
}
</tbody></table>
);
如果您查看 React 生成的 html 代码,您会注意到它向 React 组件呈现的所有 HTML 标签添加了一些数据属性 (data-reactid
)(有关数据属性的更多信息:go here) ).自 <tbody>...</tbody>
标签不是来自 React 组件,它们没有任何 data-reactid
这些属性帮助 React 跟踪 DOM 节点。
无论如何,感谢这些谈论这个问题的人。这里是链接 https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA .
更多关于 data-reactid
: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8 .
关于javascript - 从表中删除行导致 TypeError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21594009/