Приложение React-Hybrid реализует функцию "Нравится" и "Комментарии" - круг друзей.

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,
    });
  }
  • Отправить комментарий
    Плагин реакции используется для обновления массива здесь, и вы можете искать самостоятельно.
    Вы можете вызвать соответствующий интерфейс при обновлении локального массива.

  • реагировать-аддоны-обновление


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

рекомендация

отblog.csdn.net/weixin_45416217/article/details/107702877