使用react.js更新表導致錯誤的行順序

我有一個表有一些生成的行（來自一個props值），然後是一個靜態行在底部，當我做一個更新該props值添加另一個值，我的靜態最後一行不再是瀏覽器中的最後一行，它像DOM不同，認爲我的靜態行來自集合（我試圖將一個key={"foo"}添加到靜態行，但沒有幫幫我）。使用react.js更新表導致錯誤的行順序

下面是一個發生什麼的例子，當你點擊添加結果表是1,2,3，添加4，而不是1,2,3,4，添加。

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

來源

2015-01-15 superfell

當您使用的渲染<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> 
     ); 
    } 
});

來源

2015-01-15 22:57:42 daniula

使用react.js更新表導致錯誤的行順序

回答

相關問題