react笔记之props(属性)

责编:menVScode 2017-07-08 23:30 阅读(799)

        props(属性):组件之间的数据传递,是通过props来执行的。

components-card-Card.js

import React,{Component} from 'react';
export default class Card extends Component{
	render(){
		//console.log(this.props)
		let {imgSrc,name,meta,desc,joined,likeNum} = this.props;
		return(
			<div className='ui card'>
				<div className='image'>
					<img src={imgSrc} />
				</div>
				<div className='content'>
					<div className='header'>{name}</div>
					<div className='meta'>
						<a href=''>{meta}</a>
					</div>
					<div className='description'>{desc}</div>
				</div>
				<div className='extra content'>
					<span className='right floated'>Joined in {joined}</span>
					<span>
						<i className='empty heart icon'></i>{`${likeNum}  Like`}
					</span>
				</div>
			</div>
		)
	}
}

components-cardWrao-CardWrap.js

import React,{Component} from 'react';
import Card from 'card/Card.js';
export default class CardWrap extends React.Component{
	render(){
		let data = this.props.data;
		let cards = data.map((currenValue,index)=>{
			return <Card key={index} {...currenValue} />
                        /*
                            return <Card key={index} imgSrc={currenValue.imgSrc} ... likeNum={currenValue.likeNum}/>                                //react提供了一种把对象展开的方法:{...currenValue},就可以把一个对象里面的每一个属性值展开在里面。                        */
		});
		return(
			<div className='ui cards'>
				{cards}
				{/*react自动会把cards数组展开,进行编译*/}
			</div>
		)
	}
}

src-app.js

import CardWrap from 'cardWrap/CardWrap.js';
import Card from 'card/Card.js';
require('./common/style/main.css');
require('../semantic/dist/semantic.css');//引用的是semantic UI框架
let data = [
	{
		imgSrc:require('img/m00.png'),
		name:'小明',
		meta:'Friends',
		desc:'good boy!!',
		joined:'2014',
		likeNum:'56'
	},
	{
		imgSrc:require('img/m01.png'),
		name:'小刚',
		meta:'Friends',
		desc:'good boy!!',
		joined:'2013',
		likeNum:'78'
	},
	{
		imgSrc:require('img/m02.png'),
		name:'小红',
		meta:'Friends',
		desc:'good girl!!',
		joined:'2015',
		likeNum:'99'
	}
]

ReactDom.render(
	<div className='ui container'>
		<div className='ui dividing'></div>
		<Nav />
		<CardWrap data={data} />
	</div>,
	document.getElementById('root')
);

页面效果:

QQ截图20170709162748

上述代码中:let {imgSrc,name,meta,desc,joined,likeNum} = this.props;是es6中解构赋值的写法。

每个人信息都是通过props来传递的:app.js —> CardWrap.js —> Card.js

标签: props react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码