更改表结构会导致 React 失去对 DOM 的跟踪
Changing table structure causes React to lose track of the DOM
我正在尝试在 React 中创建一个表组件,其中列和行都是动态的,并且会随着时间的推移而变化。但是,当数据发生变化时,React 会抛出意外的 DOM 突变不变冲突。
这是一个小提琴,http://jsfiddle.net/69z2wepo/1797/演示了这个问题。如您所见,数据在初始渲染后会发生变化,React 无法再跟踪 DOM 的状态。
代码在这里:
var Table = React.createClass({
getDefaultProps: function() {
return {
data: [
{
colA: { value: 'foo' },
},
],
};
},
render: function() {
return (
<table>
<thead>
<tr> {
Object.keys(this.props.data[0]).map(function(key) {
return (<th>{ key }</th>);
}.bind(this))
} </tr>
</thead>
<tbody> {
this.props.data.map(function(item) {
return (<tr> { Object.keys(item).map(function(key) {
return (
<td>{ item[key] }</td>
);
}.bind(this)) } </tr>);
}.bind(this))
} </tbody>
</table>
);
}
});
var Main = React.createClass({
componentWillMount: function() {
setTimeout(function() {
var data = [
{
colA: {
value: 'foobar',
},
},
];
this.setState({
data: data,
});
}.bind(this), 3000);
},
getInitialState: function() {
var data = [
{
colA: {
value: 'foo',
},
colB: {
value: 'bar',
}
},
{
colA: {
value: 'foo',
},
colB: {
value: 'bar',
}
}
];
return {
data: data,
};
},
render: function() {
return (<Table data={ this.state.data } />);
},
});
React.render(<Main />, document.body);
console.log(React.renderToString(<Table/>));
我已经尝试了各种添加关键属性来跟踪各种元素的方法,但似乎没有什么可以解决这个问题。
使用 renderToString 渲染表组件表明 React 在表的不同级别插入了一堆元素。这是可能的原因吗?请参阅此处呈现的 DOM:
<table data-reactid=".1" data-react-checksum="1098817301">
<thead data-reactid=".1.0">
<tr data-reactid=".1.0.0">
<span data-reactid=".1.0.0.0"> </span>
<th data-reactid=".1.0.0.1:0">colA</th>
<span data-reactid=".1.0.0.2"> </span>
</tr>
</thead>
<tbody data-reactid=".1.1">
<span data-reactid=".1.1.0"> </span>
<tr data-reactid=".1.1.1:0">
<span data-reactid=".1.1.1:0.0"> </span>
<td data-reactid=".1.1.1:0.1:0"><span data-reactid=".1.1.1:0.1:0.$value:0">foo</span></td>
<span data-reactid=".1.1.1:0.2"> </span>
</tr>
<span data-reactid=".1.1.2"> </span>
</tbody>
</table>
事实证明,问题出在您的缩进上。如果您在新行上启动大括号{}
(用于在 JSX 中编写 javascript 的大括号),则您的代码可以正常工作。不知道为什么会这样。
JSFIDDLE: http://jsfiddle.net/cwn2nebs/
var Table = React.createClass({
getDefaultProps: function() {
return {
data: [
{
colA: { value: 'foo' },
},
],
};
},
render: function() {
return (
<table>
<thead>
<tr>
{
Object.keys(this.props.data[0]).map(function(key, idx) {
return (<th key={ idx } >{ key }</th>);
}.bind(this))
}
</tr>
</thead>
<tbody>
{
this.props.data.map(function(item, idx) {
return (
<tr key={ idx }>
{
Object.keys(item).map(function(key, i) {
return (
<td key={ i }>{ item[key] }</td>
);
}.bind(this)) }
</tr>);
}.bind(this))
}
</tbody>
</table>
);
}
});
var Main = React.createClass({
componentWillMount: function() {
setTimeout(function() {
var data = [
{
colA: {
value: 'foobar',
}
},
];
this.setState({
data: data,
});
}.bind(this), 3000);
},
getInitialState: function() {
var data = [
{
colA: {
value: 'foo',
},
colB: {
value: 'bar',
}
},
{
colA: {
value: 'foo',
},
colB: {
value: 'bar',
}
}
];
return {
data: data,
};
},
render: function() {
return (<Table data={ this.state.data } />);
},
});
React.render(<Main />, document.body);
更新
使用JSX编译器,我尝试将部分代码转换为纯JS:
render: function() {
return (
React.createElement("table", null,
React.createElement("thead", null,
React.createElement("tr", null, " ",
Object.keys(this.props.data[0]).map(function(key, idx) {
return (React.createElement("th", {key: idx }, key ));
}.bind(this)),
" ")
),
React.createElement("tbody", null, " ",
this.props.data.map(function(item, idx) {
return (React.createElement("tr", {key: idx }, " ", Object.keys(item).map(function(key, i) {
return (
React.createElement("td", {key: i }, item[key] )
);
}.bind(this)), " "));
}.bind(this)),
" ")
)
);
}
这是React.createElement
的工作原理:
React.createElement(type, props, children);
请注意tr
元素的空子元素:
React.createElement("tr", null, " ",
Object.keys(this.props.data[0]).map(function(key, idx) {
return (React.createElement("th", {key: idx }, key ));
}.bind(this)),
" ")
但是在新行上使用大括号,编译的代码如下所示(没有空的 (" ") 子项):
React.createElement("tr", null,
Object.keys(this.props.data[0]).map(function(key, idx) {
return (React.createElement("th", {key: idx }, key ));
}.bind(this))
)
我相信 React 将" "
孩子转换为span
元素,这是导致这里问题的原因,正如您所发现的。
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何在DOM元素上按类型构建此函数
- Windows形成web浏览器控件和Javascript更改的DOM
- Datatables:通过DOM数据源中的名称引用列
- 在DOM中查找一个模式并替换它's的内容使用jquery
- DOM事件通过JSON转换为java
- 将DOM节点值与字符串Javascript进行比较
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 流星中DOM的繁殖
- Javascript游戏输入失去焦点
- jquery日期选择器失去了交互性
- DOM元素和angular元素之间的主要区别是什么
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 如何将Knockout.JS与服务器已经在DOM中呈现的数据同步
- PHP-如何重定向到同一页面并更改DOM's
- 如何使用ViewCompiler手动编译DOM的一部分
- 更改表结构会导致 React 失去对 DOM 的跟踪
- Textarea change dom事件,工作时不会失去焦点,例如使用鼠标进行粘贴