react-responsive-carousel：如何为拇指提供固定高度？

Question

我给图像指定了固定的高度。但现在的问题是，高度也适用于拇指。 我怎样才能防止这种情况发生？

<Carousel width="600px" dynamicHeight={false}>
  {data?.book?.images.map((image, i) => (
    <img src={image} alt={`${i}`} className="h-128" />
  ))}
</Carousel>;

Answer 1

您可以用 div 包裹图像。并给该 div 一个固定的高度。之后，在图像上，您可以指定高度：100%。这样，高度将仅应用于图像。它不适用于拇指。

<Carousel width="600px" dynamicHeight={false}>
  {data?.book?.images.map((image, i) => (
    <div className="h-128">
      <img src={image} alt={`${i}`} className="h-full" />
    </div>
  ))}
</Carousel>;

Answer 2

您可以使用

renderThumbs()

为拇指提供自定义渲染函数，如下所示：

renderThumbs={(children: React.ReactChild[]) =>
    (children as React.ReactElement[]).map((child) => (
        <img
          key={"some-unique-id"}
          src={child.props.children[0].props.src}
          style={{
            height: "50px",
            width: "80px",
            objectFit: "cover"
          }}
        />
      ))
    }

您可以在

react-responsive-carousel

的 GitHub 页面的 Props 部分阅读该函数。