使用react做的聊天對話列表 - yanaweb－IT工程師數位筆記本

文章出處

剛剛接觸react 可能寫的地方有錯誤或者不完善的地方歡迎大家給指正

下面開始正題

首先分析頁面基于react的特性--把頁面中所有顯示內容看做模塊加載

本頁面可以看做一個大的模塊，我們暫且命名為commentbox
評論列表是由一條條的評論內容組成，所以把評論內容comment，單獨作為一個模塊，然后放在評論列表的模塊里commentlist
底部的輸入框作為一個輸入模塊commentform

頁面分析完成開始準備

基于jspm工具首先安裝jspm

在終端

npm init

然后安裝jspm

npm install jspm --save-dev

然后配置

jspm init

安裝需要的依賴

jspm install jquery

jspm install react@0.14.0-rc1

jspm install react-dom@0.14.0-rc1

本文中使用了semantic-ui的樣式因此安裝

jspm install semantic-ui

使用css安裝

jspm install css

然后在本地新建文件結構如下

然后在終端

browser-sync start --server --no-notify --files 'index.html,app/**/*.js'

配置本地服務器并監視index.html和js文件的變化

下面正式開始：：：：：

首先我們利用react創建一個靜態版本

在index.html引入js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>react</title>

  </head>
  <body>

    <div class="ui container" style="padding:30px;">
      <div id="app"></div>
    </div>

    <script src="jspm_packages/system.js" charset="utf-8"></script>
    <script src="config.js"> </script>
    <script>
      System.import('app/main');
    </script>
  </body>
</html>

然后在main.js中

'use strict';

import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';



ReactDOM.render(
    <h1 className="ui">你好</h1>,
  document.getElementById('app')
)

就能看到頁面上出現你好兩個字

tips：h1標簽后要有逗號分隔

因為react是模塊化結構所以我們把各個模塊分別寫在單獨的js文件中。

我們開始下最基礎的commentbox組件

在組件中第一件事就是引入react

'use strict';
import React from 'react';
import $ from "jquery";

class CommentBox extends React.Component{

  render(){   //render方法內寫的是需要返回在頁面上的元素這里有幾個重要點
　　　　　　　　　　　　//1、里面的元素必須在最外層加上div等標簽，否則會報錯原因：初學好沒弄清楚
　　　　　　　　　　　　//2、元素成對出現標簽必須閉合
　　　　　　　　　　　　//3、class為保留字，所以使用className
　　　　　　　　　　　　//4、jsx語法要求組件名稱首字母大寫；否則報錯（耽誤了好長時間找不出的錯~~）

    return(
      <div className="ui comments">
        <h1>評論</h1>
        <div className="ui divider"></div>

      </div>

    )
  }
}

export {CommentBox as default};

然后在main.js中引入commentBox

import CommentBox from './comment/CommentBox'; //注意from后面文件路徑

現在頁面的顯示

然后我們寫評論列表commentform的js

然后把這個內容作為默認內容導出后引入到commentbox頁面

然后在main頁面使用commentbox標簽輸出，因為我們定義好組件所以我們可以直接使用組件名，來顯示對應的元素

頁面顯示如下

然后安裝相同的方法定義評論列表就不贅述了

我們如果使用react就是因為他在處理數據變化時候對于dom元素的修改效率很高

所以做了一下使用ajax讀取json數據并反映到頁面上

此處用到props和state等屬性。

屬性(props)是由父組件傳遞給子組件的；
狀態(state)是子組件內部維護的數據，當狀態發生變化的同時，組件也會進行更新。當狀態發生轉換時會觸發不同的鉤子函數，從而讓開發者有機會做出相應。

首先創建一個comments.json的文件

[
  {"author":"楊倩","date":"5 分鐘前","text":"天氣不錯啊"},
  {"author":"楊晨","date":"3 分鐘前","text":"出去玩啊！"},

    {"author":"楊倩","date":"5 分鐘前","text":"天氣不錯啊"},
    {"author":"楊晨","date":"3 分鐘前","text":"出去玩啊！"},

      {"author":"楊倩","date":"5 分鐘前","text":"天氣不錯啊"},
      {"author":"楊晨","date":"3 分鐘前","text":"出去玩啊！"},
  {"author":"王凌峰","date":"2分鐘前","text":"不去"}
]

　　然后在main.js里面引入json

'use strict';

import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './comment/CommentBox';



ReactDOM.render(
  <CommentBox url="app/comments.json" />,
  document.getElementById('app')
)

　　然后commentBox.js頁面通過ajax獲取數據

'use strict';
import React from 'react';
import CommentList from "./CommentList";
import CommentForm from "./CommentForm";
import $ from "jquery";

class CommentBox extends React.Component{
constructor(props){  //傳入props即能獲取json的url
  super(props);
  this.state = {data:[]};   //給元素的state賦值一個空的數組由下邊getcomments獲取數據

  this.getComments();     
  //setInterval(() => this.getComments(),5000);
}

handleCommentSubmit(comment){
  console.log(comment );
  let comments = this.state.data,
  newComments = comments.concat(comment);
  this.setState({data:newComments});


}

getComments(){
  $.ajax({
    url: this.props.url,     //取得url
    dataType:"json",
    cache:false,
    success: comments => {
      this.setState({data:comments});   //得到json數組   通過setSatate設置顯示的數據對應著comment.js看
    },
    error:(xhr,status,error)=>{
      console.log(error);
    }
  })
}



  render(){
    return(
      <div className="ui comments">
        <h1>評論</h1>
        <div className="ui divider"></div>

      <CommentList data={this.state.data}/>
      <CommentForm onCommentSubmit = {this.handleCommentSubmit.bind(this)}/>
      </div>

    )
  }
}

export {CommentBox as default};

　　comment.js

'use strict';
import React from "react";

class Comment extends React.Component{
  render(){
    return(
      <div className="comment">
        <div className="content">
          <span className="author">{this.props.author}</span>     //取得json數組中的值，props傳入的為上級state的值
          <div className="metadata">
            <span className="date">{this.props.date}</span>
          </div>
          <div className="text">{this.props.children}</div>
        </div>
      </div>
    )
  }
}

export {Comment as default};

　　commentform.js

'use strict';

import React from 'react';

class CommentForm extends React.Component{
  handleSubmit(event){
    event.preventDefault();
    // console.log("提交表單……");
    let author = this.refs.author.value;
    let text = this.refs.text.value;
    // console.log(text);
    function dataToString(d) {
      return[
        d.getHours(),
        d.getMinutes(),
        d.getSeconds()
      ].join(":");
    };
    let date = dataToString(new Date());

    this.props.onCommentSubmit({author,text,date})

  }
  render(){
    return(
      <form className="ui reply form" onSubmit = {this.handleSubmit.bind(this)}>
        <div className="field">
          <input type="text" placeholder="姓名" ref="author"/>
        </div>
        <div className="field">
         <textarea placeholder="評論" ref="text"></textarea>
        </div>
        <button type="submit" className="ui blue button" >添加評論 </button>
      </form>
    )
  }
}

export {CommentForm as default};

　　commentlist

'use strict';

import React from 'react';
import Comment from './Comment';


class CommentList extends React.Component{
  render(){
    let commentNodes = this.props.data.map(comment => {
      return(
        <Comment author={comment.author} date={comment.date}>
          {comment.text}
        </Comment>
      );
    });
    return(
      <div>
        {commentNodes}
      </div>
    )
  }
}

export {CommentList as default};

文章列表