例子：把数组里边的图片渲染到页面上
//1.生成一个组件类
class Imgs extends Component {
//2.constructor是类的默认方法，通过new命令生成对象，实例化时，自动调用该方法
constructor(props) {
//super关键字很重要，如果要在 constructor里用到this、那么必须写super()，否则新建实例时会报错
super(props);
//绑定this
this.handleClick = this.handleClick.bind(this);
}
//点击事件的函数
handleClick(event) {
}
render() {
//传入imgs、下边map遍历的时候调用（渲染组件时，里边的属性都要用this.props传入）
const {
imgs
} = this.props
return (
<div className="content">
{
//map遍历、需要指定key值，要不会报警告、map里边需要return返回（=> ES6写法、相当于function）
imgs.map((item,index) =>{
return(
<div key={index} onClick={this.handleClick}>
<img
src={item}
data-index={index}
/>
</div>
)
})
}
</div>
)
}
};
//把图片的url放入数组中
const json = [
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',
];
ReactDOM.render(
//渲染组件、组件的属性img的值是图片url数组
<Imgs
imgs={json}
/>,
document.getElementById('root')
);
入门篇（二）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 经过上一篇环境的搭建，那么接下来就是创建一个ionic工程啦。【iOS版，Mac环境】 通过终端输入 //进入桌面...
- 上一篇我们已经建立了一个新工程建立工程的步骤 接下来我们来创建一个类 创建新的文件快捷键 command+N 我们...
- 函数的声明 函数的形式为： 如Kotlin的主函数 其中返回值类型Unit代码无返回值，可以省略不写，所以主函数可...
