feat: brokenElement新增函数方式

src/Photo.tsx

@@ -4,9 +4,11 @@ import Spinner from './components/Spinner';
 import getSuitableImageSize from './utils/getSuitableImageSize';
 import useMountedState from './utils/useMountedState';
 import './Photo.less';
+import { brokenElementDataType } from './types';
 
 export interface IPhotoProps extends React.HTMLAttributes<any> {
   src: string;
+  intro?: React.ReactNode;
   loaded: boolean;
   broken: boolean;
   width: number;
@@ -15,22 +17,25 @@ export interface IPhotoProps extends React.HTMLAttributes<any> {
   className?: string;
   onImageLoad: (PhotoParams, callback?: Function) => void;
   loadingElement?: JSX.Element;
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType)=>JSX.Element);
 }
 
-const Photo: React.FC<IPhotoProps> = ({
-  src,
-  loaded,
-  broken,
-  width,
-  height,
-  rotate,
-  className,
-  onImageLoad,
-  loadingElement,
-  brokenElement,
-  ...restProps
-}) => {
+const Photo: React.FC<IPhotoProps> = (props) => {
+  const {
+    src,
+    intro,
+    loaded,
+    broken,
+    width,
+    height,
+    rotate,
+    className,
+    onImageLoad,
+    loadingElement,
+    brokenElement,
+    ...restProps
+  } = props;
+
   const isMounted = useMountedState();
 
   function handleImageLoaded(e) {
@@ -75,7 +80,16 @@ const Photo: React.FC<IPhotoProps> = ({
     }
     return loadingElement || <Spinner />;
   }
-  return brokenElement || null;
+  if(brokenElement){
+    if(typeof brokenElement === 'function'){
+      return brokenElement({
+        src,
+        intro,
+      })
+    }
+    return brokenElement;
+  }
+  return null;
 };
 
 Photo.displayName = 'Photo';

src/PhotoSlider.tsx

@@ -396,6 +396,7 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
                       <PhotoView
                         key={item.key || realIndex}
                         src={item.src}
+                        intro={item.intro}
                         onReachMove={this.handleReachMove}
                         onReachUp={this.handleReachUp}
                         onPhotoTap={this.handlePhotoTap}

src/PhotoView.tsx

@@ -18,6 +18,7 @@ import {
   TouchStartEnum,
   ShowAnimateEnum,
   OriginRectType,
+  brokenElementDataType,
 } from './types';
 import './PhotoView.less';
 import getSuitableImageSize from './utils/getSuitableImageSize';
@@ -26,6 +27,8 @@ import correctSuitablePosition from './utils/correctSuitablePosition';
 export interface IPhotoViewProps {
   // 图片地址
   src: string;
+  // 介绍
+  intro?: React.ReactNode;
   // 容器类名
   viewClassName?: string;
   // 图片类名
@@ -35,7 +38,7 @@ export interface IPhotoViewProps {
   // 自定义 loading
   loadingElement?: JSX.Element;
   // 加载失败 Element
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType)=>JSX.Element);
   // 旋转状态
   rotate: number;
 
@@ -445,6 +448,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   render() {
     const {
       src,
+      intro,
       viewClassName,
       className,
       style,
@@ -478,6 +482,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
           <Photo
             className={className}
             src={src}
+            intro={intro}
             width={width}
             height={height}
             loaded={loaded}

src/types.ts

@@ -14,6 +14,11 @@ export type dataType = {
   intro?: React.ReactNode;
 };
 
+/**
+ * brokenElement函数使用参数
+ */
+export type brokenElementDataType = Pick<dataType, 'src' | 'intro'>;
+
 export type overlayRenderProps = {
   // 图片列表
   images: dataType[];
@@ -57,7 +62,7 @@ export interface IPhotoProviderBase {
   // 自定义 loading
   loadingElement?: JSX.Element;
   // 加载失败 Element
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType)=>JSX.Element);
 }
 
 export type ReachMoveFunction = (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number) => void;