У меня есть таблица, в которой есть несколько сгенерированных строк (из значения реквизита), а затем статическая строка внизу, когда я делаю обновление, которое изменяется значение реквизита для добавления другого значения, моя статическая окончательная строка больше не является последней строкой в браузере, ее, как и DOM, думает, что моя статическая строка из коллекции (я попытался добавить key={"foo"}
в статическую строку, но это не сделало Помогите).Обновление таблицы с помощью response.js приводит к неправильному порядку строк
Вот пример того, что происходит, когда вы нажимаете добавить результирующую таблицу, 1,2,3, add, 4, а не 1,2,3,4, add.
<!DOCTYPE html>
<html lang="en">
<head>
\t <script src="http://fb.me/react-with-addons-0.12.2.js"></script>
\t <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var Table = React.createClass({
render: function() {
var r = this.props.values.map(function(v) {
return (<tr key={v}><td>{v}</td></tr>);
});
return (
<table>
{r}
<tr><td>Last Row</td></tr>
</table>
);
}
});
var TableContainer = React.createClass({
getInitialState: function() {
return { values: ["1","2","3"]}
},
addValue: function() {
this.setState({values: ["1","2","3","4"]});
},
render: function() {
return (
<div>
<Table values={this.state.values} />
<button onClick={this.addValue}>add</button>
</div>
);
}
});
\t React.render(
<TableContainer />,
document.getElementById("content")
);
</script>
</div>
</body>
</html>