React组件套娃

class Mybtn extends Component {
    render() {
        return (
           <button>{this.props.title}</button>
        );
    }
}
class Avatar extends Component {
    render() {
        return (
            <img src={this.props.avatarUrl} alt="" className=""/>
        )
    }
}

class UserInfo extends Component {
    render() {
        return (
            <div className='userinfo'>
                    <Avatar avatarUrl={this.props.avatarUrl}></Avatar>
                    <div className="username">
                        {this.props.name}
                    </div>
            </div>
        );
    }
}

//app=>comment=>userinfo=>avatar

class Comment extends Component {
    render() {
        return (
            <div className='comment'>
                   {/* <div className="userinfo"> */}
                        <UserInfo {...this.props.user}></UserInfo>
                        {/* avatarUrl={this.props.user.avatarUrl} name={this.props.user.name} */}
                        <div className="comment-content">评论内容：{this.props.user.content}</div>

                        <div className="comment-date">评论时间：{this.props.user.date}</div>
                    {/* </div> */}
            </div>
        );
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        //遵循单向数据流
        this.user={
            avatarUrl:"https:////car2.autoimg.cn/cardfs/series/g26/M05/B0/29/100x100_f40_autohomecar__ChcCP1s9u5qAemANAABON_GMdvI451.png",
            name:'MJJ',
            content:'这是我的react组件',
            date:new Date().toLocaleTimeString()
        }
    }
    render() {
        return (
            <div>
                <h2>hello,{this.props.name}</h2>
                <Mybtn title='提交'></Mybtn>
                <Mybtn title='删除'></Mybtn>
                <Mybtn title='修改'></Mybtn>
                <Mybtn title='添加'></Mybtn>
                <Comment user={this.user}></Comment>
            </div>
        )
    }
}

export default App;