react02 页面 组件传值

//1引用React
import React from 'react';
import './CommentBox.css';
import CommentList from './CommentList';
//定义一个类继承
class CommentBox extends React.Component{
    render(){
        return(
            <div className="comments" >
                <h2>评论</h2>
                <CommentList></CommentList>
            </div>
        )
    }
}
//export default CommentBox;
export {CommentBox as default};

import React from 'react';
import CommentTest from './CommentTest'
class CommentList extends React.Component{
    render(){
        return(
            <div>
                <ul>
                    <li>
                        <h3>评论列表1</h3>
                        <CommentTest auther="无解" sex="男" data="2021-11-11"></CommentTest>
                    </li>
                    <li>
                        <h3>评论列表2</h3>
                        <CommentTest auther="无解2" sex="nv" data="2021-11-11"></CommentTest>
                    </li>
                </ul>
            </div>
        )
    }
}
export default CommentList

import React from 'react';
class CommentTest extends React.Component{
    render(){
        return(
            <div>
                <p>评论人员：{this.props.auther}</p>
                <p>评论日期：{this.props.data}</p>
                <p>评论性别：{this.props.sex}</p>
            </div>
        )
    }
}
export default CommentTest

文件目录结构