![](/img/trans.png)
[英]Using mutationObserver doesn't seem to keep track of a changing table in the 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))
)
我相信,阵营转换" "
孩子们span
元素这是问题的原因在这里,你找出来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.