React中基于变量动态修改react-simple-image-slider宽高问题求助

DevOps 小满

2026-8-1

问题分析与解决

你的代码存在两个核心问题，导致轮播组件无法正常渲染：

1. 函数组件未返回JSX元素

React函数组件必须明确返回JSX内容，你的代码里直接编写了<SimpleImageSlider>标签，但没有通过return语句将其返回，组件自然不会渲染任何内容。

2. 错误的尺寸参数类型

react-simple-image-slider的width和height属性要求接收数字类型的值，而你通过模板字符串将数值转换成了字符串（比如"896"），这会导致组件无法正确解析尺寸参数，进而无法正常渲染。

修正后的完整代码

// 先确保已正确导入组件
import SimpleImageSlider from "react-simple-image-slider";

export default function Home(){
  const images = [
    { url: "images/1.jpg" },
    { url: "images/2.jpg" },
    { url: "images/3.jpg" },
  ];
  const open = true;

  // 使用return返回JSX，同时直接传递数字类型的尺寸值
  return (
    <SimpleImageSlider
      width={open ? 896 : 880}
      height={open ? 430 : 440}
      images={images}
      showBullets={true}
      showNavs={true}
    />
  );
}