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

Question

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

我有一个表有多个生成的行(来自一个道具值),然后是一个静态行在底部,当我做一个更新,更改道具值以添加另一个值,我的静态最后一行不再是在浏览器的最后一行,它像DOM不同认为我的静态行来自集合(我尝试添加key={"foo"}到静态行,但没有帮助).

下面是一个例子,当你点击添加时,结果表是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dan*_*ula 5

当您<table>使用React 进行渲染时,您必须记住添加<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>
        );
    }
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，6 月前
查看次数：	2498 次
最近记录：	11 年，6 月前