refactor: 使用hooks重构TypingCard组件

Author: NLRX-WJC

src/components/TypingCard/index.jsx

@@ -1,39 +1,42 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import { Card } from "antd";
 import Typing from "@/utils/typing";
 
-class TypingCard extends React.Component {
-  static defaultProps = {
-    title: "何时使用",
-    source: "",
-    height: 136,
-  };
-  componentDidMount() {
+const TypingCard = (props) => {
+  const { title, height, source } = props;
+  
+  const sourceEl = useRef();
+  const outputEl = useRef();
+
+  useEffect(() => {
     const typing = new Typing({
-      source: this.source,
-      output: this.output,
+      source: sourceEl.current,
+      output: outputEl.current,
       delay: 30,
     });
     typing.start();
-  }
-  render() {
-    return (
-      <Card
-        bordered={false}
-        className="card-item"
-        title={this.props.title}
-        style={{ minHeight: this.props.height }}
-        id={this.props.id}
-      >
-        <div
-          style={{ display: "none" }}
-          ref={(el) => (this.source = el)}
-          dangerouslySetInnerHTML={{ __html: this.props.source }}
-        />
-        <div ref={(el) => (this.output = el)} />
-      </Card>
-    );
-  }
-}
+  }, []);
+  return (
+    <Card
+      bordered={false}
+      className="card-item"
+      title={title}
+      style={{ minHeight: height }}
+    >
+      <div
+        style={{ display: "none" }}
+        ref={sourceEl}
+        dangerouslySetInnerHTML={{ __html: source }}
+      />
+      <div ref={outputEl} />
+    </Card>
+  );
+};
+
+TypingCard.prototype = {
+  title: "",
+  source: "",
+  height: 136,
+};
 
 export default TypingCard;