react项目中如何渲染一个数组到页面中呢?
- 我有这样的一个数组
this.state = {
books:[
{name:"web前端开发入门",price:20},
{name:"数据库管理工程师",price:30},
{name:"IOS开发指南",price:29.9},
],
txt:"这是输入框中的内容",
show:!true
}
/在react中,使用数据的map方法进行列表的渲染,使用数据数组map出一个html数组,插到页面中/
<tbody>
<tr>
<td>书名</td>
<td>价格</td>
<td>购买</td>
</tr>
{this.state.books.map((b,i)=>{
console.log(i);
console.log(b);
return (
<tr key={i}>
<td>《{b.name}》</td>
<td>{b.price}元</td>
<td>
{/* react中事件绑定的函数如果要进行自定义传参,需要绑定一个函数,这个函数中进行目标函数调用,从而自定义传参。 */}
<button onClick={e=>this.buyClick(e,b)}>点击购买</button>
</td>
</tr>
)
})}
</tbody>
点击购买事件
buyClick(e,b){
console.log(b);
}
页面渲染