props③ - Extractions

not extraction component example

 

 <--call Comment component-->

 <Comment

 date={comment.date}

 text={comment.text}

 author={comment.author} />

 

<--comment const-->

  const comment = {

    date: new Date(),

    text: 'I hope you enjoy learning React!',

    author: {

      name: 'Hello Kitty',

      avatarUrl: 'http://placekitten.com/g/64/64'

    }

  };

 

<--comment component-->

function Comment(props) {

return (

    <div className="Comment">

　　{/*下のUserInfoの中にはdivタグとimgタグが混在していて、再使用のためにこの部分をextrate。*/}

        <div className="UserInfo">

            <img className="Avatar"

                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>

);}

---

extraction component example

function Comment(props) {

    <div className="Comment">

        <UserInfo user={props.author} />

        <div className="Comment-text">{props.text}</div>

        <div className="Comment-date">{formatDate(props.date)}</div>

    </div>

    ・・・

 

UserInfo Component

    return (

      <>

        <div className="UserInfo">

          <Avatar user={props.user}/>

          <div className="UserInfo-name">

            {props.user.name}

          </div>

        </div>

      </>

    )

  }

 

Avator Component

    return (

    <>

      <img className="Avatar"

      src={props.user.avatarUrl}

      alt={props.user.name}

      />

    </>

    );