React学习笔记（二）：组合组件

创建并组合组件

子组件：

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.属性名” 来获取

效果图：