React中如何使用变量配置Swiper的breakpoints断点？

• 本质是JavaScript对象字面量的键解析规则：当你在对象里直接写标识符: 值的格式时，键名会被自动转为字符串类型的标识符本身，不会去读取同名变量里存的值。你写的第二种写法里，sm: {}最终生成的对象键是字符串"sm"，根本不是变量sm保存的数值400。
• Swiper的breakpoints参数要求键必须是数值类型的视口宽度阈值，拿到"sm"这种字符串键的时候，根本识别不出来对应的宽度规则，配置自然不生效。
• 顺带提一句：你贴的两段示例里参数名拼错了，Swiper接收断点配置的正确参数名是breakpoints，不是breakpoings，拼写错误也会导致配置失效。
• 第一种写法能正常跑，就是因为直接写400: {}的时候，对象键就是数值400，完全符合Swiper的参数格式要求。

用ES6的计算属性名语法就行，把要当键的变量包在方括号[]里，JS会先计算括号里的表达式结果，把结果当成最终的对象键，示例代码：

const sm = 400;
<Swiper
  breakpoints={{
    [sm]: {
      // 这里就是400宽度对应的断点配置
    }
  }}
>
  {/* 放Swiper的轮播内容 */}
</Swiper>

如果要配置多个断点变量，直接在对象里写多个计算属性就可以：

const sm = 400;
const md = 768;
const lg = 1024;
<Swiper
  breakpoints={{
    [sm]: { slidesPerView: 1 },
    [md]: { slidesPerView: 2 },
    [lg]: { slidesPerView: 3 }
  }}
>
  {/* 轮播项 */}
</Swiper>

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