Die React-Hybrid-App implementiert die Funktion "Gefällt mir" und "Kommentar" des Freundeskreises

1. Nachfrage:

Mit einer dynamischen Veröffentlichungssoftware können Sie Kommentare mögen, abbrechen und löschen.
2. Implementierungsideen:
Zunächst müssen Sie Vorgänge wie Echtzeit-Likes und -Kommentare ausführen. Es ist nicht möglich, die Seite in Echtzeit zu aktualisieren, um Rendering-Vorgänge auszuführen. Wir müssen diese Daten also in einem neuen Array in unserem lokalen Array speichern.

• Beim ersten Rendern legen wir ein lokales Array fest, um die von der Schnittstelle gerenderten Daten zu speichern. Wenn wir arbeiten, müssen wir die Daten pushin unserem eigenen Array bearbeiten. Zusammenfassend lässt sich sagen: Abbrechen, Löschen und Löschen von Kommentaren, dh Hinzufügen oder Löschen eines Arrays.

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

3. Der spezifische Implementierungscode wird nicht mehr veröffentlicht und behandelt hauptsächlich viele Details.
4. Teil der Codeschritte:

• Definieren Sie zunächst ein Array zum Speichern von Daten im lokalen Status.
  
• Führen Sie dann die Verarbeitung der Hintergrunddatenspeicherung durch
• // Hier ist nur meine Geschäftsdatenverarbeitung

  // 评论数据处理
  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,
    });
  }

• Kommentar senden Mit einem
  Reaktions-Plugin wird das Array hier aktualisiert, und Sie können selbst suchen.
  Sie können die entsprechende Schnittstelle aufrufen, während Sie das lokale Array aktualisieren.

• 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,
      })
    }