循环绑定元素

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'))

代码考古
1 声望0 粉丝