react提取组件

效果：

将这部分的组件提出来

import React, { Component } from 'react';
// import img01 from './images/01.png'
import './App.css';

class App extends Component {


  render() {
  
    function Avatar(props){
      return <img  src={props.user.avatarUrl} alt={props.user.name} />
    }
    function UserInfo(props){
      return (
         <div className="UserInfo">
            <Avatar  user={props.author} />
            <div className="UserInfo-name">
              {props.author.name}
            </div>
          </div>
      )
    }
    function Comment(props) {
      return (
        <div className="Comment">
          <UserInfo author={props.author}/>
          <div className="Comment-text">
            {props.text}
          </div>
          <div className="Comment-date">
            {formatDate(props.date)}
          </div>
        </div>
      );
    }
    function formatDate(date) {
      return date.toLocaleDateString();
    }
    const comment = {
      date: new Date(),
      text: 'I hope you enjoy learning React!',
      author: {
        name: 'Hello Kitty',
        avatarUrl: 'http://placekitten.com/g/64/64'
      }
    };

    return (
      <div className="App">
        <Comment
          date={comment.date}
          text={comment.text}
          author={comment.author} />
      </div>
    );
  }
}

export default App;