如何为react-image-gallery添加自定义图标并修复全屏按钮状态异常

问题 #

使用react-image-gallery时，想要替换全屏、左右箭头的默认图标为自定义内联SVG，尝试自定义全屏按钮组件后，点击切换全屏状态，按钮始终显示“Closed”，相关代码如下：

初始使用代码：

<div className="image-gallery-wrapper">
    <ImageGallery 
      items={images} 
      autoPlay={false}
      showThumbnails={true}
      useBrowserFullscreen={false}
      showPlayButton={false}
      showBullets={true}
      showIndex={true}
       />
  </div>

自定义全屏按钮组件：

const FullScreenButton = ({ onClick, isFullScreen }) => {
   return isFullScreen ?
      <button type="button" className="image-gallery-icon image-gallery-fullscreen-button" onClick={onClick} aria-label="Open Fullscreen">Open</button>
:
      <button type="button" className="image-gallery-icon image-gallery-fullscreen-button Closed" onClick={onClick} aria-label="Close Fullscreen">Closed</button>
}

App组件中使用自定义按钮：

function App() {
  return (
    <div className="app">
      <div className="image-gallery-wrapper">
        <ImageGallery 
          items={images} 
          autoPlay={false}
          showThumbnails={true}
          useBrowserFullscreen={false}
          showPlayButton={false}
          showBullets={true}
          showIndex={true}
          renderFullscreenButton={(onClick, isFullscreen) => (
            <FullScreenButton onClick={onClick} isFullscreen={isFullscreen} />
          )}
         />
      </div>
    </div>
  );
}

问题原因 #

props大小写不匹配导致状态无法正确传递：

• 自定义组件FullScreenButton接收的props参数是isFullScreen（大写S）
• 但在renderFullscreenButton回调中传入的参数是isFullscreen（小写s）
  这会让组件内部的isFullScreen始终为undefined，条件判断isFullScreen ? ... : ...会走false分支，所以按钮一直显示“Closed”。

修复方案 #

只需统一props的大小写即可，两种方式任选：

方式1：修改自定义组件的props名称 #

const FullScreenButton = ({ onClick, isFullscreen }) => {
   return isFullscreen ?
      <button type="button" className="image-gallery-icon image-gallery-fullscreen-button" onClick={onClick} aria-label="Open Fullscreen">Open</button>
:
      <button type="button" className="image-gallery-icon image-gallery-fullscreen-button Closed" onClick={onClick} aria-label="Close Fullscreen">Closed</button>
}

方式2：修改传入props时的名称 #

renderFullscreenButton={(onClick, isFullscreen) => (
  <FullScreenButton onClick={onClick} isFullScreen={isFullscreen} />
)}

替换为内联SVG示例 #

把按钮内的文本换成自定义SVG，示例如下：

const FullScreenButton = ({ onClick, isFullscreen }) => {
  return isFullscreen ? (
    <button type="button" className="image-gallery-icon image-gallery-fullscreen-button" onClick={onClick} aria-label="Close Fullscreen">
      {/* 退出全屏SVG */}
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
      </svg>
    </button>
  ) : (
    <button type="button" className="image-gallery-icon image-gallery-fullscreen-button" onClick={onClick} aria-label="Open Fullscreen">
      {/* 进入全屏SVG */}
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M7 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v2m0 10v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5m14 0h-5a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2v-5m0-14v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2"/>
      </svg>
    </button>
  )
}

内容的提问来源于stack exchange，提问作者xoam