refactor: 使用hooks重构PanThumb组件

Author: NLRX-WJC

src/components/PanThumb/index.jsx

@@ -1,38 +1,39 @@
 import React, { Component } from "react";
 import { PropTypes } from "prop-types";
 import "./index.less";
-class PanThumb extends Component {
-  static propTypes = {
-    image: PropTypes.string.isRequired,
-    zIndex: PropTypes.number,
-    width: PropTypes.string,
-    height: PropTypes.string,
-    className: PropTypes.string,
-  };
-  static defaultProps = {
-    width: "150px",
-    height: "150px",
-    zIndex: 1,
-    className:""
-  };
-  render() {
-    const { image, zIndex, width, height,className } = this.props;
-    return (
-      <div
-        className={`pan-item ${className}`}
-        style={{
-          zIndex,
-          height,
-          width,
-        }}
-      >
-        <div className="pan-info">
-          <div className="pan-info-roles-container">{this.props.children}</div>
-        </div>
-        <img src={image} className="pan-thumb" alt=""/>
+
+const PanThumb = (props) => {
+  const { image, zIndex, width, height, className } = props;
+  return (
+    <div
+      className={`pan-item ${className}`}
+      style={{
+        zIndex,
+        height,
+        width,
+      }}
+    >
+      <div className="pan-info">
+        <div className="pan-info-roles-container">{props.children}</div>
       </div>
-    );
-  }
-}
+      <img src={image} className="pan-thumb" alt="" />
+    </div>
+  );
+};
+
+PanThumb.prototype = {
+  image: PropTypes.string.isRequired,
+  zIndex: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PanThumb.defaultProps = {
+  width: "150px",
+  height: "150px",
+  zIndex: 1,
+  className: "",
+};
 
 export default PanThumb;