React中Splide.js Grid Extension整合问题：无法生成网格布局

我找不到任何React中Splide Grid Extension的整合示例，请问该如何实现？我遗漏了什么？以下是我的代码：

import React, { useEffect, useState } from "react";

import { Splide, SplideSlide } from '@splidejs/react-splide';
import { Grid } from "@splidejs/splide-extension-grid";

import Container from "../layout/Container";
import Section from "../layout/Section";

import classes from './Jobs.module.css';

const Jobs = ({blok}) => {
    const [jobs, setJobs] = useState([]);

    ...

    return <Section>
        <Container>           
            
            <div className={classes.slider_wrapper}>
                <Splide aria-label="jobs slider" options={ {
                    pagination: false,
                    arrows: false,
                    grid: {
                        rows: 2,
                        cols: 2,
                    },
                } } extensions={{ Grid }}>
                        
                        {jobs && jobs.map(item => (  
                            <SplideSlide key={item.uuid} >                  
                                <div className={classes.item}>
                                    <div className={classes.content}>
                                        <div className={classes.title}>{item.content.title}<span>.</span></div>
                                    </div>
                                </div>  
                            </SplideSlide>              
                        ))}
                    
                </Splide>
                
            </div>           
            
        </Container>
    </Section>
}

export default Jobs;

这段代码仅返回普通Splide滑块，无法生成网格，请问如何实现2x2网格布局？

问题排查与解决步骤 #

• 检查依赖版本兼容性
  Splide的Grid扩展必须和核心Splide库版本一致，打开package.json确认@splidejs/react-splide和@splidejs/splide-extension-grid的版本号相同，若不一致，升级或降级到匹配版本。

• 引入Grid扩展的样式文件
  你漏掉了Grid扩展的CSS，这是网格样式生效的关键。在代码顶部添加：

  import '@splidejs/splide-extension-grid/dist/css/splide-extension-grid.min.css';
  

  同时确保已经引入Splide基础样式：

  import '@splidejs/react-splide/css';
  

• 修正Grid配置的位置
  Grid的配置参数不能直接放在options根节点，需要嵌套到extensions字段下。修改options为：

  options={ {
      pagination: false,
      arrows: false,
      extensions: {
          Grid: {
              rows: 2,
              cols: 2,
          },
      },
  } }
  

  组件上的extensions={{ Grid }}属性保留不变。

• 确认Slide数量充足
  2x2网格需要至少4个Slide才能完整渲染一行网格，检查jobs数组是否正确加载，且数据数量不少于4条。

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