Browse Source

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

node 6 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
 `version 0.2.0`
5
 `version 0.2.0`
6
 
6
 
7
 ```js
7
 ```js
8
-import Comment, { Editor } from 'comment';
8
+import Comment, { Editor, RenderText } from 'comment';
9
 ```
9
 ```
10
 
10
 
11
 - [deprecate] 表示不推荐使用
11
 - [deprecate] 表示不推荐使用
12
 
12
 
13
-## Props
14
-
15
-#### Comment
13
+## Comment
16
 
14
 
17
 
15
 
18
 | props      | type    | default                            | required | description                                  |
16
 | props      | type    | default                            | required | description                                  |
27
 
25
 
28
 
26
 
29
 
27
 
30
-##### Editor
28
+## Editor
31
 
29
 
32
 | props         | type            | default       | required | description                                                                                       |
30
 | props         | type            | default       | required | description                                                                                       |
33
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
31
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
144
 **注意上面的 `onRef={ref => this.editor = ref }`**,这是实现父组件调用子组件方法的关键。**
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
 
241
 
232
 - `yarn build` 将项目打包成一个单页应用
242
 - `yarn build` 将项目打包成一个单页应用
233
 - `yarn lib` 将项目打包成一个 es5 组件
243
 - `yarn lib` 将项目打包成一个 es5 组件
234
-- `yarn prettier` 格式化代码
244
+- `yarn prettier` 优化代码格式
235
 
245
 
236
 ## TODO
246
 ## TODO
237
 
247
 

+ 2
- 1
src/App.js View File

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

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

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