Question

我有一个表有多个生成的行（来自一个props值），然后是一个静态行，当我做一个更新，更改props值以添加另一个值时，我的静态最后一行是不再是浏览器中的最后一行，它与DOM不同，认为我的静态行来自集合（我尝试将key={"foo"}添加到静态行但是没有帮助）。

这里有一个例子，当你点击添加时，结果表是1,2,3，添加，而不是1,2,3,4，添加。

＆＃13;

<!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>

＆＃13;

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更新表会导致错误的行顺序

1 个答案: