通用评论

index.js 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import App, { Editor } from "./App";
  4. // import registerServiceWorker from "./registerServiceWorker";
  5. class Index extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. fileList: [
  10. {
  11. uid: "1",
  12. name: "xxx.png",
  13. status: "done",
  14. response: "success", // custom error message to show
  15. url:
  16. "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg"
  17. }
  18. ]
  19. };
  20. }
  21. render() {
  22. return (
  23. <App
  24. showAlertComment
  25. showAlertReply
  26. showAlertFavor
  27. showError
  28. {...this.props}
  29. >
  30. <Editor
  31. maxUpload={9}
  32. autoFocus
  33. {...this.props.editorProps}
  34. fileList={this.state.fileList}
  35. handleChangeFileList={fileList => {
  36. this.setState({
  37. fileList
  38. });
  39. }}
  40. />
  41. </App>
  42. );
  43. }
  44. }
  45. /**
  46. * 渲染评论组件
  47. * @param {object} config 编辑器配置
  48. * - {string} id 渲染评论的DOM的 ID
  49. * - {number} type 评论的 type
  50. * - {string} businessId 评论的 businessId
  51. * - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
  52. */
  53. function renderComment(config) {
  54. if (!config.id) {
  55. throw new Error("id is required");
  56. }
  57. if (!config.type) {
  58. throw new Error("type is required");
  59. }
  60. if (!config.businessId) {
  61. // throw new Error("businessId is required");
  62. config.businessId = "test";
  63. console.warn("没有传入 businessId 参数,默认使用: test");
  64. }
  65. if (!config.API) {
  66. // throw new Error("API is required");
  67. config.API = "http://api.links123.net/comment/v1";
  68. console.warn(
  69. "没有传入 API 参数,默认使用: http://api.links123.net/comment/v1"
  70. );
  71. }
  72. ReactDOM.render(<Index {...config} />, document.getElementById(config.id));
  73. // registerServiceWorker();
  74. }
  75. window.renderComment = renderComment;
  76. if (process.env.NODE_ENV !== "production") {
  77. renderComment({
  78. id: "root-comment",
  79. type: 1,
  80. businessId: "test",
  81. businessUserId: 4,
  82. userId: 71299,
  83. onCountChange: c => {
  84. console.log(c);
  85. },
  86. editorProps: {
  87. // emojiPopoverPlacement: "bottom",
  88. // uploadPopoverPlacement: "top"
  89. }
  90. });
  91. }
  92. // renderComment({
  93. // id: "root-comment",
  94. // type: 1,
  95. // businessId: "test",
  96. // API: 'http://api.links123.net/comment/v1',
  97. // });