Browse Source

feat: 添加 RenderContent 用于渲染带表情的文本

node 5 years ago
parent
commit
a8071ed518
4 changed files with 32 additions and 8 deletions
  1. 16
    6
      README.md
  2. 2
    1
      src/App.js
  3. 13
    0
      src/components/RenderText/index.js
  4. 1
    1
      src/index.js

+ 16
- 6
README.md View File

@@ -5,14 +5,12 @@
5 5
 `version 0.2.0`
6 6
 
7 7
 ```js
8
-import Comment, { Editor } from 'comment';
8
+import Comment, { Editor, RenderText } from 'comment';
9 9
 ```
10 10
 
11 11
 - [deprecate] 表示不推荐使用
12 12
 
13
-## Props
14
-
15
-#### Comment
13
+## Comment
16 14
 
17 15
 
18 16
 | props      | type    | default                            | required | description                                  |
@@ -27,7 +25,7 @@ import Comment, { Editor } from 'comment';
27 25
 
28 26
 
29 27
 
30
-##### Editor
28
+## Editor
31 29
 
32 30
 | props         | type            | default       | required | description                                                                                       |
33 31
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
@@ -144,6 +142,18 @@ handleChangeSubmit() {
144 142
 **注意上面的 `onRef={ref => this.editor = ref }`**,这是实现父组件调用子组件方法的关键。**
145 143
 
146 144
 
145
+## RenderText
146
+
147
+```jsx
148
+
149
+import { RenderText } from 'comment';
150
+
151
+render() {
152
+  return RenderText('test [呲牙]')
153
+}
154
+```
155
+
156
+
147 157
 ## 使用
148 158
 
149 159
 
@@ -231,7 +241,7 @@ $ yarn start
231 241
 
232 242
 - `yarn build` 将项目打包成一个单页应用
233 243
 - `yarn lib` 将项目打包成一个 es5 组件
234
-- `yarn prettier` 格式化代码
244
+- `yarn prettier` 优化代码格式
235 245
 
236 246
 ## TODO
237 247
 

+ 2
- 1
src/App.js View File

@@ -8,6 +8,7 @@ import { isFunction } from "./helper";
8 8
 import CommentInput from "./components/CommentInput";
9 9
 import CommentList from "./components/CommentList";
10 10
 import Editor from "./components/Editor";
11
+import RenderText from "./components/RenderText";
11 12
 import lang from "./lang";
12 13
 import "./App.css";
13 14
 
@@ -402,6 +403,6 @@ App.defaultProps = {
402 403
   showHeader: true
403 404
 };
404 405
 
405
-export { Editor };
406
+export { Editor, RenderText };
406 407
 
407 408
 export default App;

+ 13
- 0
src/components/RenderText/index.js View File

@@ -0,0 +1,13 @@
1
+import React from "react";
2
+import { renderContent } from "../../helper";
3
+
4
+const App = text => (
5
+  <div
6
+    className="comment-item-content"
7
+    dangerouslySetInnerHTML={{
8
+      __html: renderContent(text)
9
+    }}
10
+  />
11
+);
12
+
13
+export default App;

+ 1
- 1
src/index.js View File

@@ -2,7 +2,7 @@ import React, { Component } from "react";
2 2
 import ReactDOM from "react-dom";
3 3
 // e.g.
4 4
 // import { Button, Icon } from "antd";
5
-import App, { Editor } from "./App";
5
+import App, { Editor, RenderText } from "./App";
6 6
 import registerServiceWorker from "./registerServiceWorker";
7 7
 
8 8
 class Index extends Component {