#23 肥猫列表

qq1448896454

function renderFatCats (cats) {
  let list = document.querySelector('#cats-list');
  list.innerHTML = null;
  cats.sort((a, b) => b.weight - a.weight);
  let str = '';
  for(let v of cats) {
      str+=`<div class='cat'>
	       <span class='cat-name'>${v.name}</span>
	       <span class='cat-weight'>${v.weight}</span>
	    </div>`;
  }
  list.innerHTML = str;  
}

比较喜欢原生

zhierrox

react不用箭头简写component，怎样实现每次调用都刷新呢？求大神讲解。
下面是自己实现的版本，经测试，可以运行一次，但不能刷新

class Cat extends Component {
  render () {
    const { cat } = this.props;
    return (
      <div class='cat'>
        <span class='cat-name'>{ cat.name }</span>
        <span class='cat-weight'>{ cat.weight }</span>
      </div>
    )
  }
}

class CatList extends Component {
  render () {
    const { cats } = this.props  
    return (
      <div id='cats-list'>
        { cats.map((cat) => <Cat cat={ cat } />) }
      </div>
    )
  }
}

function renderFatCats (cats) {
  cats.sort((x, y) => y.weight - x.weight);
  ReactDOM.render(<CatList cats={ cats } />, document.getElementById('app'));
}

love小六六

function renderFatCats (cats) {
        cats = cats.sort((a,b)=>a.weight-b.weight);
        let dom = document.getElementById('cats-list');
        dom.innerHTML = '';
        let df = new DocumentFragment();
        cats.forEach(function (child){
            let item = document.createElement('div');
            item.classList.add('cat');
            Object.keys(child).forEach(function(li){
                let span = document.createElement('span');
                span.classList.add('cat-'+li);
                span.innerHTML = child[li];
                item.appendChild(span);
            });
            df.appendChild(item);
        });
        dom.appendChild(df);
    }

为什么不对呀~~~

大肥凯

@ScriptOJ 谢谢，非常重要的知识点

YooHoeh

@ScriptOJ

  const list = document.getElementById("cats-list");
      list.innerHTML = "";
      cats.sort((a, b) => {
        return a.weight > b.weight ? -1 : 1;
      });

      let renders = "";
      cats.forEach(item => {
        renders += `<div class="cat">
                                  <span class="cat-name">${item.name}</span>
                                  <span class="cat-weight">${item.weight}</span>
                                </div>`;
      });
      list.innerHTML = renders.trim();
}

本地可以正常使用，但是提交的时候提示“猫没有被正确渲染”

tk

12345678

余音

function renderFatCats (cats) {
  let list = document.querySelector('#cats-list')
  list.innerHTML= null
  if (cats.length >2) {
        cats.sort(function(x, y) {return x['weight'] - y['weight']});
        cats.reverse()
  }

  var str = ''
  for (var item of cats) {
    str += `<div class='cat'><span class='cat-name'>${item.name}</span><span class='cat-weight'>${item.weight}</span></div>`
  }
  list.innerHTML = str
}

下面不可以：

cats.sort(function(x, y) {return x['weight'] - y['weight']});
cats.reverse()

这样就可以：

cats.sort(function(x, y) {return y['weight'] - x['weight']});

corazon

@Sleet 我也是自己写的排序没有用sort 也会出现有时候通过的情况,可能是排序部分在某些数据测试下没通过.试了半天没试出来.

zhierrox

@zhierrox 更新一下：犯了低级错误，class应该为className!!!

ryankeeprunning

@zhierrox 这个问题解决了吗，我用react写了也显示只能渲染0只猫