rc

react-comment

a comment component writen in react

Showing:

Popularity

Downloads/wk

20

GitHub Stars

2

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

7

Size (min+gzip)

102.6KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-comment

前端评论组件,支持分页。带后端 demo server 。 screenshot

安装与使用

安装

npm install react-coment

傻瓜式使用:

根据“约定大于配置”原则,要求作为placeholderdiv容器遵循如下约定:

  1. id属性值固定,这样可以锁定容器元素。
  2. data-scope属性名固定
  3. data-topicId属性名固定
  4. data-loginUrl属性名固定

则入口文件也是固定的,从而编译出的comment.js也是固定的。

这样,就只要引入提前编译的comment.js即可(即是通过script标签引入demo/dist/comment.js):

<!-- 占位,评论的容器 -->
<div id="react-comment-container" data-topicId="" data-scope="movie" data-login-url="/account/login"></div> 

<!-- 引入 react-comment/precompile/comment.js 脚本 -->
<script src="/js/comment.js"></script>

screenshot

如果不是通过上述“傻瓜式”方式使用,需要进行手工配置、编译。

高级使用

一个高级点的使用方式是自己控制评论组件的渲染,就像一个真正的React组件那样。

一个使用场景:在一个CMS系统中,其余部分都是服务端渲染,评论部分是客户端渲染,可以在服务端模板中加入以下HTML代码:

<div id="react-comment-container" 
    data-scope="movie" 
    data-topicId="UniquetopicId" 
    data-loginUrl="/sth/like/account/login"
></div> 

然后编写以下入口文件:

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {Comment} from 'react-comment';
// 你可以导入默认提供的store,也可以根据暴露的reducer创建自己的store
import {store} from 'react-comment';

import 'path/to/dist/style.css';    // 这里可以导入你的自定义CSS 

const scope="ebook";  // 根据某种方式所获得的评论的scope 
const topicId=1;      // 根据某种方式所获取的评论的主题id

const loginUrl='/account/login';  // 登录页面,会自动附加`?redirectUrl=${document.location}`参数

ReactDOM.render(
    (<Provider store={store}>
        <div style={{ position:'relative' }}>
            <LoginMaskLayer loginUrl={loginUrl} />
            <Comment scope={scope} topicId={topicId} />
        </div>
    </Provider>),
    document.getElementById("react-comment-container")
);

编译、打包之,得到comment.js文件,以script的形式引入HTML中即可。

出于通用性考虑,目前入口文件index.js没有载入css,如果想要使用预定义的样式,需要手工载入。

  • 如果使用webpack打包css,只需要require('react-comment/dist/style.css')
  • 如果使用了其他技术,可以把/dist/style.css拷贝到相应目录下通过link链接。

当然,你完全可以使用自己的样式。

API

对外接口

出于要适应更多的使用场景的目的,本 package 对外暴露comment组件、storereducer几个属性:

  • Comment:评论组件
  • reducer: 相关的redux reducer,可以配合其他组件使用,
  • store:就是一个非常简单的、针对评论组件预定义的、普通的redux store,大可以自定义之。

对于一种CMS,可能页面的文章部分或者其他部分是由服务端渲染,而评论部分可以用react-comment。在这种情况下,可以默认提供的store,如同上例那样。

而如果是要在单页面场景中使用,则很可能需要把react-comment融入自己的一个大store中,从而跟其他组件互动。这时候可以利用package暴露出来的reducer来创建store。默认的store定义为:

import thunkMw from 'redux-thunk';
import {createStore,applyMiddleware,compose} from 'redux';
import {reducer} from 'react-comment';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(
    reducer, 
    {
        user:{
            list:[],
            currentLoginUser:ANONYMOUS_USER,
            hasSignedIn:false,
        }
    },
    composeEnhancers(
        applyMiddleware( thunkMw, ) 
    )
);

Comment 基本属性

Comment组件有以下基本属性:

  • scope : 评论所述的域,可以用来分类,比如文章、视频、书籍等
  • topicId :评论对应的主题ID

实际上,Comment组件是个容器组件,它会把将来传递给它的store的状态里的评论、回复、用户及相关配置等信息丢给内部一个真正的Comment视图组件,从而渲染出评论效果。

与后端交互的API

由于react-comment本身只是个前端,需要向后端交互,为了保持通用性,在lib/api/index.js中规定了与后端通信接口。

  • 获取评论列表: fetchCommentList(scope,topicId,page=1,size=8)=>Promise<{comments,count}>
  • 创建新评论: create(scope,topicId,content)=>Promise<any>
  • 投票支持某条评论: onUpvote(commentId)=>Promise<Comment>或 Promise<false>
  • 投票反对某条评论 onDownvote(commentId)=>Promise<Comment>或Promise<false>:
  • ...

默认情况下,

  1. 预定义的fetchComentList(scope,topicId,page,size) 发起的请求为:
POST "/comment/list"
{
    credentials:'same-origin',
    headers:{
        "Content-Type":"application/json",
    },
    body:JSON.stringify({scope, topicId, page, size, }),
})

并假定服务器返回{rows:comments,count:count}对象,并将之转换为{comments,count}

  1. 预定义的create(scope,topicId,content)=>Promise<any> 发起的请求为:
POST `/comment/new`
{
    credentials:'same-origin',
    headers:{
        'Content-Type':'application/json',
    },
    body:JSON.stringify({ scope, topicId, content })
}

并假定服务器返回评论信息组成的数组

  1. 预定义的onUpvote(commentId)发起的请求为:
POST "/comment/upvote"
{
    method:'post',
    credentials:'same-origin',
    headers:{
        "Content-Type":"application/json",
    },
    body:JSON.stringify({id:commentId}),
}
  1. 预定义的onDownvote(commentId)发起的请求为:
POST "/comment/downvote"
{
    method:'post',
    credentials:'same-origin',
    headers:{
        "Content-Type":"application/json",
    },
    body:JSON.stringify({id:commentId}),
})

更多的与后端交互的API请参考lib/api/index.js文件。

开发

基本原理

  • 使用babel编译lib/文件夹下的所有JavaScript文件到dist/文件夹下
  • 使用less预处理lib/components/style.less,渲染后存为dist/style.css

目录介绍

基本结构:

index.js            # 入口文件
lib/                # 源码文件夹,
dist/               # 发布文件夹

注意,dist/会被git忽略,但是不会被npm仓库忽略。

构建

从命令行构建

> npm run build

此命令等效于

> npm run babel
> npm run lessc

自带 demo

添加配置demo/server/config/config.dev.js后,启动服务器:

npm run start-demo-server

webpack

npm run webpack -- --watch

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100