通用评论
node 8417246525 Merge branch 'master' of node/npmcomment into master 4 years ago
lib publish comment@0.3.0 4 years ago
public publish comment@0.0.1 4 years ago
src feat: 添加 RenderContent 用于渲染带表情的文本 4 years ago
.babelrc publish comment@0.0.1 4 years ago
.eslintrc publish comment@0.0.1 4 years ago
.gitignore publish comment@0.0.1 4 years ago
CHANGELOG.md publish comment@0.3.0 4 years ago
README.md publish comment@0.3.0 4 years ago
config-overrides.js publish comment@0.0.1 4 years ago
package.json publish comment@0.3.0 4 years ago

README.md

Comment

通用评论系统及编辑器

version 0.3.0

import Comment, { Editor, RenderText } from 'comment';
  • [deprecate] 表示不推荐使用

Comment

props type default required description
type number true 评论的 type
businessId string true 评论的 business id
API string http://api.links123.net/comment/v1 false API 前缀
showList boolean true false 是否显示评论列表
showEditor boolean true false 是否显示评论输入框
showHeader boolean true false 是否显示评论顶部的提示
token string false [deprecate] token,用于身份认证,非必须。默认使用 cookie

Editor

props type default required description
rows number 5 false 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行
placeholder string 说点什么吧… false 评论的中的提示文字
showEmoji boolean true false 是否显示 Toolbar 中表情工具
showUpload boolean true false 是否显示 Toolbar 中 上传图片工具
value string false 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value
onChange function(value) false 编辑器内容改变的回调函数
onSubmit function({ text, files }) false 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表
btnSubmitText string 发表 false 提交按钮的文字
btnLoading boolean false false 按钮是否正在加载中
btnDisable boolean false false 按钮是否禁用
button ReactNode false 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮
emojiToolIcon ReactNode false Toolbar 中表情的图标
imageToolIcon ReactNode false Toolbar 中上传文件的图标
onRef function false 传递子组件的引用

什么时候不要使用 value/onChange/onSubmit

如果将 comment 作为通用评论组件,则不要使用 value onChange onSubmit。因为组件内部,实现了通用评论的业务逻辑。

可以使用 value/onChange/onSubmit 的情况:

  • 单独使用其中的 Editor。即 import { Editor } from 'comment'
  • 不需要展示评论列表,即设置 showList: false
// 单独使用 Editor
<Editor value={this.state.value} onChange={(v) => this.setState({ value })} />

// 不需要展示评论列表

<Comment type={1}  showList={false}>
  <Editor value={this.state.value} onChange={(v) => this.setState({ value })} />
</Comment>

button

如果使用 button,则 btnLoading btnDisable btnSubmitText 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。

所以如果要提交编辑器的值,需要自己在 Button 组件上实现提交功能。编辑器的值,可以通过 onChange 方法获取到。

如果使用了 button 属性,并且没有为其设置 onClick 方法,则 onClick 默认为发布评论,即点击按钮会发表评论:

// 如下代码所示
// 点击“自定义按钮”的时候,会发表评论。这是由 Comment 组件内部实现的业务逻辑
<Comment type={1} businessId="test" showList={false}>
  <Editor 
    button={(
      <Button
        type="primary"
        ghost
      >
        自定义按钮
      </Button>
    )}
  />
</Comment>

如果使用了 button 属性,并且设置了 onClick 方法,则会覆盖默认的 onClick 方法:

// 下面的代码,点击的时候,不会提交评论
// 而是会输出 state 的值(
// 即编辑器的值,因为 onChange 将编辑器输入的值通过回调函数传递给了父组件)
<Comment type={1} businessId="test" showList={false}>
  <Editor 
    button={(
      <Button
        type="primary"
        ghost
        onChange={(value) => this.setState({ value })}
        onClick={() => console.log(this.state.value)}
      >
        自定义按钮
      </Button>
    )}
    value={this.state.value}
  />
</Comment>

onRef

如果你需要在父组件里面调用子组件的方法,就可以使用 onRef。主要是用于调用 Editor 组件内部的 resetState 方法。

如果你需要在父组件里面,手动清空 Editor 里面的数据,则可以使用 resetState。因为即使父组件传入了 value, Editor 内部也会保存一份 value 的值,用于 onSubmit 回调将值传递给父组件。所以可能存在,当子组件值没有清除,而父组件的 value 为空的情况,导致编辑器中文字和实际预想的不一致。所以当在父组件里面使用了 value 并重置 value 的时候,最好清空 Editor 的 state。

具体使用方式如下:


handleChangeSubmit() {
  // 点击按钮,调用 onSubmit 的时候,清空 Editor 的数据
  this.editor.resetState();
}


<Comment type={1} businessId="test">
  <Editor 
    // 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
    onRef={ref => this.editor = ref } 
    onSubmit={() => this.handleChangeSubmit()}
  />
</Comment>

注意上面的 onRef={ref => this.editor = ref },这是实现父组件调用子组件方法的关键。**

RenderText


import { RenderText } from 'comment';

render() {
  return RenderText('test [呲牙]')
}

使用

作为组件使用

# npm 安装
$ npm install git+https://git.links123.net/npm/comment.git --save
# yarn 安装
$ yarn add git+https://git.links123.net/npm/comment.git

然后在代码里面引入 comment 组件:

import Comment, { Editor } from 'comment'

// ...

render() {
  return (
    <Comment type={1} businessId="test">
      <Editor />
    </Comment>
  )
}

注意:最后,还需要在 HTML 文件里面引入阿里云 OSS SDK <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

作为静态文件引入

作为静态文件使用的话,首先需要在 index.js 里面设置好组件的 props,主要是 typebusinessId

// ...
<App type={1} businessId="test">
    <Editor />
</App>

然后再进行打包:

$ yarn build

打包后会得到静态文件,分别通过 link 和 script 标签在你的项目里面引入打包后的文件。

接下来还需要引入 OSS SDK,用于直传文件到 OSS。

最后创建一个 id 为 root-comment 的标签,作为渲染通用评论的跟元素。

如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
</head>
<body>
  <div id="root-comment" style="width: 700px"></div>
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
  <script src="./static/js/main.eac872df.js"></script>
</body>
</html>

开发

$ git clone https://git.links123.net/npm/comment
$ cd comment
$ yarn
$ yarn start
  • yarn build 将项目打包成一个单页应用
  • yarn lib 将项目打包成一个 es5 组件
  • yarn prettier 优化代码格式

TODO

  • 前后端统一错误码
  • type 和 businessID 的定义
  • Editor onSubmit 回调
  • 对评论的回复点赞,报错
  • oss/sts 接口报错
  • 头像 404 https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/
  • 上传图片的时候偶尔会出现InvalidPart