React-ハイブリッドアプリはいいねとコメント機能を実装します-友達の輪機能

1.需要：

動的パブリッシングソフトウェア。コメントを高く評価、キャンセル、削除できます。
2.実装のアイデア：
最初に、リアルタイムのいいねやコメントなどの操作を実行する必要があります。レンダリング操作を実行するためにページをリアルタイムで更新することは不可能です。したがって、これらのデータをローカルの新しい配列に格納する必要があります。

• 初めてレンダリングするときは、インターフェイスによってレンダリングされたデータを格納するローカル配列を設定します。操作中は、データを操作pushして独自の配列にする必要があります。つまり、コメントを「いいね」、「キャンセル」、「削除」、「削除」、つまり配列を追加または削除します。

 对于所需要操作的模块来说，一定需要将其抽取为单独组件。只有这样，才好对数据进行管理处理。

3.特定の実装コードは、主に多くの詳細を扱って、もう投稿されません。
4.コードステップの一部：

• まず、ローカル状態でデータを格納する配列を定義します。
  
• 次に、バックグラウンドデータストレージ処理を実行します
• //これが私のビジネスデータ処理です

  // 评论数据处理
  getCommentList = () => {
    
    
    const {
    
     item, dynamicsList: {
    
     commentContentList } } = this.props;
    const newCommentList = [];
    item.commentList.forEach((item2) => {
    
    
      (commentContentList || []).forEach(item3 => {
    
    
        if ((item3.commentId === item2.commentId) && item3.commentType === 0) {
    
    
          newCommentList.push({
    
    
          });
        }
      });
    });
    this.setState({
    
    
      initCommentList: newCommentList,
    });
  }

• コメントを送信
  ここで配列を更新するためにreactプラグインが使用されており、自分で検索できます。
  ローカル配列の更新中に、対応するインターフェイスを呼び出すことができます。

• react-addons-update

import update from 'react-addons-update';

    if (isCommentContent) {
    
    
      this.setState({
    
    
        initCommentList: update(initCommentList, {
    
    
          $push: [{
    
    
            commentContent,
            receiverName: '',
            senderAccountId: accountId,
            senderName: accountName,
          }]
        }),
        commentInputVisible: false,
        showComment: false,
      })
    }