创建并组合组件
子组件:
import React, { Component } from "react";//导入react
import { Card } from "element-react"; //按需导入elementUI和主题包
import "element-theme-default";
class Comment extends Component{ //定义组件名
render(){
return(
<div>
<Card className="box-card">
<div>{this.props.name}</div>
<div>{this.props.age}</div>
<div>{this.props.sex}</div>
</Card>
</div>
)
}
}
export default Comment;//导出这个组件
父组件:
import React from "react";//引入react
import Comment from "./Comment";//导入子组件
class CommentList extends React.Component{ //定义组件名继承React.Component
render(){
let commentNodes = [
{name:"tom",age:20,sex:"男"},
{name:"marry",age:19,sex:"女"}
].map((comment,key)=>{
return(
<Comment key={key} name={comment.name} age={comment.age} sex={comment.sex}></Comment>
)
});
return(
<div>
{commentNodes}
</div>
)
}
}
export default CommentList;//导出这个组件
Comment是子组件,其中用到了elementUI中的Card组件,是一个卡片效果。CommentList是父组件,循环创建子组件并将数据通过props传递给子组件,得到一个卡牌集合。
注意:本人在写react的时候报了类似于这样子的错:Each child in an array or iterator should have a unique “key” prop.解决办法只要在循环的每个子项添加一个key就行了,如上面的父组件。
props传递数据:
在父组件中通过属性将数据传递给子组件
在子组件中用 “this.props.属性名” 来获取
效果图: