用 react.js 更新 table 会导致错误的行顺序

Question

我有一个 table，它有许多生成的行（来自 props 值），然后在底部有一个静态行，当我进行更新以更改 props 值以添加另一个值时，我的静态最后一行不再是浏览器中的最后一行，它就像 DOM 不同认为我的静态行来自集合（我尝试向静态行添加一个 key={"foo"} 但那没有'帮不上忙）。

这是一个示例，当您单击添加时，结果 table 是 1,2,3,add,4 而不是 1,2,3,4,add。

<!DOCTYPE html>
<html lang="en">
  <head>
 <script src="http://fb.me/react-with-addons-0.12.2.js"></script>
   <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>
            );
          }
        });
        
     React.render(
          <TableContainer  />,
          document.getElementById("content")
        );
      </script>
    </div>
  </body>
</html>

Answer 1

当您使用 React 渲染 <table> 时，您必须记住添加 <tbody>（如果需要 <thead>）。所有浏览器都会自动将它们添加到 DOM 节点，但这会在 React Virtual DOM.

中造成混淆

您需要更改的是：

var Table = React.createClass({
    render: function() {

        var r = this.props.values.map(function(v) {
            return (<tr key={v}><td>{v}</td></tr>);
        });
        return (
            <table>
                <tbody>
                {r}
                <tr><td>Last Row</td></tr>
                </tbody>
            </table>
        );
    }
});

用 react.js 更新 table 会导致错误的行顺序

Updating a table with react.js results in the wrong row order

reactjs