react学习笔记(二) 循环渲染组件+传参

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);
		
    }

页面渲染