Question

我以这种方式重新渲染jqmobile表并且全部工作：

var List = React.createClass({

  componentDidMount:function(){
    $(".list-box-app-list").table();
  },

  componentDidUpdate:function(){
    $(".list-box-app-list").table();
  },

  render: function() {
    var allListItems = this.props.allListItems;
    var listItems = [];

    for (var key in allListItems) {
      listItems.push(<ListItem key={key} list_item={allListItems[key]} />); 
    }

    return (
      <table  data-role="table" data-mode="columntoggle" className="ui-responsive list-box-app-list">
        <thead>
          <tr>
            <th data-priority="2">Id</th>
            <th>Author</th>
            <th data-priority="1">Text</th>
          </tr>
        </thead>
        <tbody>
          {listItems}
        </tbody>
      </table>
    );
  }

});

示例在这里：https://eugen35@bitbucket.org/eugen35/flux-todomvc.git

branch：listAndJQMobile

npm install
npm run watch // create bundle.js
npm start // run server.js

有没有办法更优化地做到这一点？

因为我的例子我认为这样做： 1）（重新）在DOM中渲染JSX，2）INITIALIZE JQMobile-table with .table（）; 我认为earler，reactDOM只更新了我的表中的一些新行，我不必重新初始化JQM表。但这不起作用。在DOM整个表中每次更新重新渲染后可能会发生反应。从那里我需要重新初始化它作为JQM表。

我做错了什么？

ReactJS和jQuery Mobile Tables - 如何在更新存储后优化重新呈现表

0 个答案: