4週目/Twitter Introコードステータスへの返信

17268 ワード
ハーモニー テキストリンク


App.各コンポーネントはjsで作成されます.
入力データのdummyDatejsを参考にして書けばいい
困難なtweetコンポーネントを再実現
基本コードはこのように書かれており、よく読むことが重要です.
インポートする必要があるデータdummyTweetsにmapが作成されました.
ステータスなので、その中のデータを使用するにはtweetを使用する必要があります.
const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {

        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
              </div>
              TODO : 트윗 메세지가 있어야 합니다.
            </div>
          </li>
        );
      })}
    </ul>
  );
};

完了コード

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src = {tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className = "tweet__username" >{tweet.username}</span>
                <span className = "tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className = "tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};
その他に必要な機能は次のとおりです.
名前が「parkhacker」なら背景色を変えなければなりません
クラス名を用意して背景色を変更します.
名前が「parkhacker」の場合、クラス名を付けることができます.
// tweet 중에서 이름이 "parkhacker"인 사람만 변수에 할당하고
const isParkHacker = tweet.username === 'parkhacker'

// 삼항연산자를 사용해서 박해커이면 클래스 네임이 두개 들어가게
// 아니면 클래스 네임이 하나만 적용되게 해준다
const tweetUserNameClass = isParkHacker
          ? 'tweet__username tweet__username--purple'
          : 'tweet__username';
          
// 클래스이름 안에다 넣어주면 끝난다          
<li className="tweet" key={tweet.id}>
  <span className={tweetUserNameClass}>{tweet.username}</span>
</li>
useStateで置き換えられますか?と想像
これでもいい
const Tweets = () => {
  let [박해커, 박해커변경] = useState('parkhacker')
  
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const 박해커임 = tweet.username === 박해커
        const 박해커클래스이름 = 박해커임 ? 
        'tweet__username tweet__username--purple' 
        :'tweet__username'
     <span className = {박해커클래스이름} >{tweet.username}</span>
    </ul>
)}
SOPT:6回ワークショップ-restaPI、jwt
ARMアーキテクチャサーバ(フライングプラットフォーム)centos 7.5 yumインストールk 8 sチュートリアル