#23 肥猫列表
-
0
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; }
比较喜欢原生
-
0
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')); }
-
0
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); }
为什么不对呀~~~
-
0
@ScriptOJ 谢谢,非常重要的知识点
-
0
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(); }
本地可以正常使用,但是提交的时候提示“猫没有被正确渲染”
-
1
12345678
-
0
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']});
-
0
@Sleet 我也是自己写的排序没有用sort 也会出现有时候通过的情况,可能是排序部分在某些数据测试下没通过.试了半天没试出来.
-
0
@zhierrox 更新一下:犯了低级错误,class应该为className!!!
-
0
@zhierrox 这个问题解决了吗,我用react写了也显示只能渲染0只猫