13、React系列之--微博Demo 02 終結篇

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

PS:轉載請注明出處
作者:TigerChain
地址:http://www.lxweimin.com/p/9fddf666b718
本文出自TigerChain簡書

React 教程系列

教程簡介

  • 1、閱讀對象

本篇教程適合有React基礎的朋友閱讀(基礎知道 state,props, 組件化思想，webpack+yarn 等)，老鳥直接略過，如果有誤，歡迎指出，謝謝。

正文

經過上一篇學習，我們把微博 Demo 的雛形搭建出來了，那把接下來我們把微博后面的內容帶大家手把手全部做完。我們接著上一節的步驟繼續學習

5、添加頭像組件

  • 1、在項目的根目錄新建 img 文件夾并且放入三張圖片 (具體在demo中去查看)
imgs.png
  • 2、修改 WeiBoListItem.js

只添加一句代碼，就是進入一張圖片并且設置樣式，這里就不貼代碼了，看圖即可。

import_avator.png

如圖所示，其中黃色部分就是我們引入一張圖片，并設置樣式，大家應該想到了還要去設置樣式，沒錯。

  • 3、修改 ListItemStyle.css ,添加以下樣式即可
.imgStyle{
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 10px;
}
  • 4、yarn start 跑一下，如果沒有什么問題，會報如下錯
error_import_img.png

從圖中我們可以清楚的看到報錯的原因，就是我們加載不了圖片，給我們的建議是下面這條紅線中說的，我們需要 loader 去處理文件類型。loader 我們不陌生，我們去安裝即可。提前說一下，在這里我們要安裝兩個 loader 分別是 url-loader 和 file-loader (都是用于打包文件和圖片)。關于 url-loader 和 file-loader 的區別 請查看：url-loader和file-loader加載器有什么區別?

  • 5、安裝 url-loader 和 file-loader。
yarn add url-loader file-loader --dev

安裝了 loader 以后肯定要在 webpack.config.js 中去配置。

  • 6、添加 url-loader file-loader 到 webpack.config.js 中去
{
       test: /\.(png|jpg)$/,
       loader: 'url-loader?limit=8192'
}

將以上內容添加到 webpack.config.js loaders 標簽中，這沒什么好說的。

  • 7、運行項目 yart-start

我們就會看到如下界面

avator_weibo_list.png

我們如期把頭像加載進來了。

6、添加評論列表組件

我們在項目 app 目錄新建 評論組件 CommentForm.js

# CommentForm.js


import React, { Component, PropTypes } from 'react';

// 導入評論的樣式
import styles from '../css/commentStyle.css';


/**
 * 取得當前時間
 * @return {[type]} [description]
 */
function getCurrentFormatDate() {
    var date = new Date() ;
    var seperator1 = "-" ;
    var seperator2 = ":" ;
    var month = date.getMonth() + 1 ;
    var strDate = date.getDate() ;
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
}

/**
 * 評論組件
 */
export default class CommentForm extends Component {
  constructor(props) {
    super(props);
    this.state =  {
      //默認回復內容為空
      replycontents:[],
    }
  }

  render() {
    //遍歷評論內容
    var replyContentDatas = this.state.replycontents.map(function(data,index) {
     return(
       //  <CommentReplyList key={index} reply={data}/>
       <div key={index}>
         <div>
           {/* 回復姓名 */}
            <span>{data.name}</span>
            {/* 回復內容 */}
            <span>{data.content}</span>
          </div>
          {/* 回復時間 */}
            <span>{data.time}</span>
      </div>
     );
   });

   return (
      <div className={styles.rootView}>
        <div className={styles.headView}>
          {/* 回復的頭像 */}
            <img src={require('../img/qiche.jpg')} className={styles.img} />
          {/* 回復的文本框 */}
            <div className={styles.textareaViewStyle}>
              <textarea cols='4' rows='4' ref="content"/>
              <button className={styles.commentBtnStyle} onClick={this._reply.bind(this)}>評論</button>
            </div>
        </div>
        {/* 回復內容 */}
            {replyContentDatas}
      </div>
     );
  }

  /**
   * 回復評論功能
   */
  _reply(){
      //取得當前時間
      let currentTime = getCurrentFormatDate();
      //取得回復的內容
      let recontent = this.refs.content.value;
      if(recontent.length==0){
        alert('評論內容不能為空！')
        return ;
      }
      let newContent = {
        content:recontent,
        name:'軍軍',
        time:currentTime,
      }
      //取得老的回復內容
      let oldRepContent = this.state.replycontents,
      //新的回復內容和老的回復內容疊加起來
      newRplContent = oldRepContent.concat(newContent);//數組的疊加
      //
      this.setState({
          replycontents:newRplContent,
      });
      //輕空輸入框內容
      this.refs.content.value = "";
  }
}

這個代碼稍微有點多，但是注釋寫的非常清楚，此組件的作用就是把評論的組件寫出來。

7、在 css 目錄中新建 commentStyle.css (評論組件 css 樣式)

/*根樣式*/
.rootView{
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 10px;
  margin-top: -15px;
}
/*評論頭頭像，文本框，按鈕樣式*/
.headView{
  display: flex;
  background: #fff;
}
/*昵稱樣式*/
.nickNameStyle{
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
/**
 * 評論列表樣式
 */
.commentListStyle{
  padding-left: 55px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
/**
 * 評論內容樣式
 */
.commentContentStyle{
  display: flex;
  flex:1;
  margin-left: 10px;
  justify-content: space-between;
}
.img{
  width: 35px;
  height: 35px;
}
/**
 * 評論內容樣式
 */
.textareaViewStyle{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  flex:1;
  margin-bottom: 10px;
}

/**
 * 評論按鈕樣式
 */
.commentBtnStyle{
  width: 100px;
  background: #ff8146;
  margin-top: 10px;
  border: 1px solid #f77c3d;
  color: #fff;
  height: 25px;
  font-size: 14px;
}

這沒有什么好說的，經過前面一步步的創建 css 這里我們大體也能看懂，注釋也非常清楚。

以上步驟我們就成功創建了個評論組件，但是我們要把這個組件嵌入到 WeiBoListItem.js 中并且添加事件交互，我們接著做

8、添加 CommentForm.js 到 WeiBoListItem.js 中

  • 1、首先我們在 WeiBoListItem.js 中導入評論組件
# WeiBoListItem.js

import CommentForm from './CommentForm' ;
  • 2、在 render 的 return 方法中隱藏或顯示評論組件
# WeiBoListItem.js

  //渲染界面
  render() {

    let data = this.props.itemData ;

    return (
      <div>
          {this._renderHeadView(data)}

          <hr className={styles.hrStyle}/>

          {this._renderFooterView(data)}
          {/* 點擊評論按鈕 則展開評論組件，否則隱藏  新添加的方法*/}
          {this.state.isComment?  <CommentForm />:null}
        </div>
     );
  }
  • 3、給點贊等按鈕添加事件在 _renderFooterView() 方法中
# WeiBoListItem.js

 _renderFooterView(data){
       return(
         <div className={styles.commentViewStyle}>
           <ul className={styles.ulStyle}>
             {/* 此處新增方法 */}
             <li className={styles.liStyle} onClick={this._dianzan.bind(this)}>點贊:{this.state.zanNum}</li><div className={styles.shuxian}></div>
             <li className={styles.liStyle} onClick={this._comment.bind(this)}>評論:{data.NoComment}</li><div className={styles.shuxian}></div>
             <li className={styles.liStyle} onClick={this._zhuanFa.bind(this)}>轉發:{data.NoPointGreat}</li>
           </ul>
         </div>
       );
   }

4、添加點贊等方法

# WeiBoListItem.js

   /**
    * 評論方法 
    */
   _comment(){
       this.setState({
         isComment:true
       })
     }
     /**
      * 點贊方法
      */
     _dianzan(){
       this.setState({
         isComment:false,
         zanNum:parseInt(this.state.zanNum)+1,
       })
     }
      /**
       * 轉發方法
       */
     _zhuanFa(){
       this.setState({
         isComment:false
       })
   }

到這里基本上我就能響應評論組件并且輸入內容來交互了，試一下吧。在命令行中 使用 yarn start ,并在瀏覽器輸入 localhost:8899 回車

weibo_dam.gif

我們基本上把開頭微博的樣子完成百分之九十了，接下來就是把評論組件抽取出來并且把評論列表樣式修改一下(我們這里只是把姓名，內容，時間顯示出來，這里完全可以抽取成一個組件)

9、抽取評論列表

在 app 中新建 CommentReplyList.js (評論列表組件)

# CommentReplyList.js

import React, { Component, PropTypes } from 'react';

import styles from '../css/commentStyle.css';

/**
 * 評論列表組件
 */
export default class CommentReplyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 回復列表
      data:this.props.reply
    }
  }

  render() {

    let replyContent = this.state.data ;

    return (
      <div className={styles.commentListStyle}>
        <img src={require('../img/avtova.jpg')} className={styles.img} />
            {/**評論布局**/}
            <div className={styles.commentContentStyle}>
             {/**昵稱和內容布局**/}
              <div className={styles.nickNameStyle}>
                {/**評論昵稱**/}
                <span>{replyContent.name}</span>
                {/**評論內容**/}
                <span>{replyContent.content}</span>
              </div>
               {/**評論時間**/}
              <span className={styles.timeSize}>{replyContent.time}</span>
            </div>
      </div>
    );
  }
}

10、修改 CommentForm.js

modify_commentform.png

從圖中可以看到，我們只是修改黃色部分即可。

看一下效果:

weibo_commentlist.png

我們可以看到評論列表樣式我們修改完成了。

11、添加微博列表中圖片組件

  • 1、在 app 中新建 CommentListImgs.js (微博列表圖片組件)
import React, { Component, PropTypes } from 'react';

/**
 * 導入圖片樣式
 */
import styles from '../css/commentImgsStyle.css' ;
/**
 * 微博列表中的圖片 無狀態的組件
 */
export default class CommentListImgs extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    // 遍歷圖片并顯示
    var imgs = this.props.imgUrls.map(function(imgurl,index) {
    return(<li key={index} className={styles.liStyle}><img src={require('../img/avtova.jpg')} className={styles.imgStyle}></img></li>);
   });
  return(
    <ul className={styles.ulstyle}>
      {imgs}
    </ul>
  ) ;
 }
}
  • 2、添加圖片組件樣式

在 css 目錄中新建 commentImgsStyle.css 并輸入以下內容


.imgStyle{
  width: 100px;
  height: 100px;
}
.ulstyle{
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}
.liStyle{
  list-style:none;
  float:left;
  margin-right: 10px;
  margin-top: 10px;
  align-self: center;
}
  • 3 、修改 WeiBoListItem.js 組件 以下核心修改的地方
import CommentListImgs from './CommentListImgs.js' ;

_renderHeadView(data){
    return(
      <div className={styles.item}>
        <img src={require('../img/tiger.jpg')} className={styles.imgStyle}></img>
        <div className={styles.topRightView}>
          <div className={styles.nickNameAndSendTime}>
            <span>{data.nickName}</span>
            <span>{data.sendTime}</span>
          </div>

          <p>{data.content}</p>
            {/**新添加的內容**/}
          {data.contentImgUrls?<CommentListImgs imgUrls={data.contentImgUrls}/>:null}
        </div>
      </div>
    )
  }

代碼太多，我們這里只貼出核心修改的地方，具體代碼看demo

我們再運行一下，就會看到我們開頭的效果圖

weibo-demo.gif

到此為止，我們手把手教大家擼了一個微博的小 Demo,經過這個 demo 大家掌握 webpack+yarn+react的基礎知識,以及組件化的思想，無狀態化組件編寫等。希望大家能從 0 開始動手寫一遍。

Demo地址

https://github.com/tigerchain/react-lesson/tree/master/lesson02/10-weibodemo

如果覺得對你有用，就點個喜歡吧。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,578評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,701評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,691評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,974評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,694評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,026評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,015評論 3贊 450
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,193評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,719評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,442評論 3贊 360
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,668評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,151評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,846評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,394評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2贊 380

推薦閱讀更多精彩內容

  • 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 PS:轉載請注明出處作者:TigerChain地址:http...
    TigerChain閱讀 2,593評論 9贊 14
  • GitChat技術雜談 前言 本文較長，為了節省你的閱讀時間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,710評論 7贊 110
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,220評論 7贊 35
  • 最近在學習 Webpack,網上大多數入門教程都是基于 Webpack 1.x 版本的,我學習 Webpack 的...
    My_Oh_My閱讀 8,201評論 40贊 247
  • 像蟲子咬著指尖 心里隱隱作痛 指頭來回揉搓 有點失落 鳥兒叫 天兒明 心兒堵的慌 雨過天晴 總是難逃心里的結
    田萍閱讀 320評論 1贊 6