循环绑定元素
const arr = ['1','2','3'];
const ulEle =(<ul>
{arr.map((item,index)=>{
//循环绑定jsx元素 必须要有key属性,来区分不同的元素,否者会报错
return <li key={index}>{item}</li>
})}
</ul>)
ReactDOM.render(ulEle,document.querySelector('#root'))
不能用foreach以为它不能有返回值
关于foreach和map的关系,这里我贴一个链接foreach和map的区别
然后过滤元素的话,它不能用filter。
const goods = [
{id:1,price:100,title:"小米1"},
{id:2,price:200,title:"小米2"},
{id:3,price:300,title:"小米3"},
{id:4,price:400,title:"小米4"},
]
const filterEle = (
<ul>
{goods.map((good,index)=>{
return (good.price>200?<li key={good.id}>{good.title}</li>:null)
})
}
</ul>
)
// ReactDOM.render(ulEle,document.querySelector('#root'))
ReactDOM.render(<div>{filterEle}</div>,document.querySelector('#root'))
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。