我有一个ReactJS HTML表格组件,并使用setState方法更新了它的内容(单元格值)。这是基本代码:
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]]
data``[[1, 2, 3], [4, 5, 6]]
table.setState({data : initialData});
我收到此错误:
TypeError:updatedChildren [j]是未定义的updatedChildren [j] .parentNode.removeChild(updatedChildren [j]);
它从何而来?
一些浏览器(经过Firefox和Chrome测试)会自动将<tbody>...</tbody>标签添加到没有标签的HTML表中。将它们添加到我的表组件中可以解决此问题:
<tbody>...</tbody>
render: function () { return ( <table><tbody> { ... same code as before ... } </tbody></table> );
如果您看一下React生成的html代码,您会注意到它data- reactid向React组件渲染的所有HTML标签添加了一些数据属性()(有关data属性的更多信息,请参见:此处)。由于<tbody>...</tbody>标签不是来自React组件,因此它们没有任何标签data- reactid,这些属性有助于React跟踪DOM节点。
data- reactid
无论如何,谢谢那些谈论这个问题的人。这里的链接https://groups.google.com/forum/#!topic/reactjs/NLs- PdrdDMA。
有关更多信息data- reactid:https : //groups.google.com/forum/# ! topic/reactjs/ewTN- WOP1w8。