React extracting components_2964: 01背包-CSDN博客

本文链接：https://blog.csdn.net/qq_34351732/article/details/78563260

className for clearly understand

<html>
  <head>
      <title>Document</title>
      <script src="../react.js"></script>
      <script src="../react-dom.js"></script>
      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
    <div id="demo"></div>
    <script type="text/babel">
       function formatDate(date) {
         return date.toLocaleDateString()
       }

       function Comment(props) {
         return (
           <div className="Comment">
            <div className="UserInfo">
              <img className="Avater" src={props.author.avatarUrl} alt={props.author.name} />
              <div className="UserInfo-name">{props.author.name}</div>
            </div>
            <div className="Comment-text">
              {props.text}
            </div>
            <div className="Comment-date">
              {formatDate(props.date)}
            </div>
           </div>
         )
       }

       const comment = {
         date: new Date(),
         text: 'I hope you enjoy learning React',
         author: {
           name: 'wlh',
           avatarUrl: 'http://placekitten.com/g/64/64'
         }
       }
       const element = <Comment author={comment.author} text={comment.text} date={comment.date} />
       ReactDOM.render(
         element,
         document.getElementById('demo')
       )
    </script>
  </body>
</html>

extract： complex
name ：own point of view

<html>
  <head>
      <title>Document</title>
      <script src="../react.js"></script>
      <script src="../react-dom.js"></script>
      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
    <div id="demo"></div>
    <script type="text/babel">
       function formatDate(date) {
         return date.toLocaleDateString()
       }

       function Avater(props) {
         return <img className="Avater" src={props.user.avatarUrl} alt={props.user.name} />
       }

       function UserInfo(props) {
         return (
           <div className="UserInfo">
             <Avater user={props.user} />
             <div className="UserInfo-name">{props.user.name}</div>
           </div>
        )
       }
       function Comment(props) {
         return (
           <div className="Comment">
            <UserInfo user={props.author} />
            <div className="Comment-text">
              {props.text}
            </div>
            <div className="Comment-date">
              {formatDate(props.date)}
            </div>
           </div>
         )
       }

       const comment = {
         date: new Date(),
         text: 'I hope you enjoy learning React',
         author: {
           name: 'wlh',
           avatarUrl: 'http://placekitten.com/g/64/64'
         }
       }
       const element = <Comment author={comment.author} text={comment.text} date={comment.date} />
       ReactDOM.render(
         element,
         document.getElementById('demo')
       )
    </script>
  </body>
</html>