React 使用して、コメント欄の機能を作成する

1. コメントリストのレンダリング

1.1. useState を使用してコメントリストを管理

useState を利用してコメントリストを管理します。

1.2. map メソッドを使ってリストデータを繰り返し処理し、レンダリング

map メソッドを使用して、リスト内のデータをレンダリングします。

const defaultList = [
  {
    rpid: 3,
    user: {
      uid: '13258165',
      avatar: '',
      uname: 'Jack',
    },
    content: 'jjjjjjj',
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: 'Tom',
    },
    content: 'ttttttt',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: 'Kelly',
    },
    content: 'kkkkkkkkk',
    ctime: '10-19 09:00',
    like: 66,
  },
]


  function CommentItemList() {
        
    return  commentList.map(item=><div className="reply-item" key = {item.user.uid}>
    {/* 头像 */}
    <div className="root-reply-avatar">
      <div className="bili-avatar">
        <img
          className="bili-avatar-img"
          alt=""
        />
      </div>
    </div>

    <div className="content-wrap">
      {/* 用户名 */}
      <div className="user-info">
        <div className="user-name">{item.user.uname}</div>
      </div>
      {/* 评论内容 */}
      <div className="root-reply">
        <span className="reply-content">{item.content}</span>
        <div className="reply-info">
          {/* 评论时间 */}
          <span className="reply-time">{item.ctime}</span>
          {/* 评论数量 */}
          <span className="reply-time">点赞数:{item.like}</span>
          {item.user.uid !== user.uid && <span className="delete-btn" onClick={()=>onDeletClicked(item.user.uid)}>
            删除
          </span>}


        </div>
      </div>
    </div>
  </div>)
  }



<div className="reply-list">
    <CommentItemList/>
</div>

2. コメント削除機能

要件

1. 自分のコメントにのみ削除ボタンを表示する。
2. 削除ボタンをクリックすると、そのコメントを削除し、リストから非表示にする。

コアのアイデア

1. 削除ボタンの表示 - 条件付きレンダリングを使用して、自分のコメントにだけ削除ボタンを表示します。
2. 削除機能 - 現在のコメントの id を取得し、filter を使ってリストから該当するコメントを削除します。

function onDeletClicked(userId){
  console.log(userId)
  console.log(userId)
  const  newCommentList = commentList.filter(item=>item.user.uid!==userId)
  setCommentList(newCommentList)
  
}

<span className="reply-time">点赞数:{item.like}</span>
        {item.user.uid !== user.uid && <span className="delete-btn" onClick={()=>onDeletClicked(item.user.uid)}>
          删除
</span>}

3. ナビゲーションタブのレンダリングとハイライトの実装

要件

クリックしたタブをハイライト表示します。

コアのアイデア

1. クリックされたタブの type（一意の識別子）を記録します。
2. タブをレンダリングする際、現在のタブの type と比較し、一致した場合にハイライト用のクラスを追加します。

const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]
  
  const [navList, setNavList] = React.useState(tabs) 
  
  function onNavItemClick(type){
    setType(type)
    let sortedCommentList
    if(type==='hot'){
      sortedCommentList = commentList.slice().sort((a, b) => b.like - a.like)
    }else{
      sortedCommentList = commentList.slice().sort((a, b) => {
        return new Date(b.ctime) - new Date(a.ctime);
      });
    }
    setCommentList(sortedCommentList)
    
  }
  
  
  
  
  function NavListItemList() {
    return navList.map(
      item=>
      <span 
      className={`nav-item ${currrentNavType === item.type&& 'active' }}` } 
      onClick={()=>onNavItemClick(item.type)}  
      key={item.type}>
      {item.text}
      </span>)
  }

4. コメントリストの並び替え機能

要件

コメントリストに並び替え機能を追加します。
並び替え基準として「like 数」や「ctime」などを選択可能にします。

function onNavItemClick(type){
  setType(type)
  let sortedCommentList
  if(type==='hot'){
    sortedCommentList = commentList.slice().sort((a, b) => b.like - a.like)
    setCommentList()
  }else{
    sortedCommentList = commentList.slice().sort((a, b) => {
      return new Date(b.ctime) - new Date(a.ctime);
    });
  }
  setCommentList(sortedCommentList)
  
}