2015-01-15 4 views
2

У меня есть таблица, в которой есть несколько сгенерированных строк (из значения реквизита), а затем статическая строка внизу, когда я делаю обновление, которое изменяется значение реквизита для добавления другого значения, моя статическая окончательная строка больше не является последней строкой в ​​браузере, ее, как и 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>

ответ

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> 
     ); 
    } 
}); 
Смежные вопросы