在SharePoint Modern中如何创建点击可切换同页内容的可点击图片？

方案1：列表+视图格式化+动态连接（无代码，快速实现） #

• 新建自定义列表，新增3个字段：
  • 「展示图片」字段：类型选择「图像」，上传要展示的点击用图片
  • 「对应富文本」字段：类型选择「多行文本」，勾选「使用增强型富文本」，录入该图片点击后要显示的内容
  • 「排序序号」字段（可选）：类型为数字，用来调整图片的排列顺序
• 逐条录入所有图片和对应的富文本内容，保存列表
• 打开目标SharePoint页面，进入编辑模式，添加两个「列表」Web部件，都选择刚才创建的自定义列表
• 配置左侧的列表Web部件：将视图切换为画廊视图，进入视图格式设置，调整卡片模板仅显示「展示图片」字段，隐藏所有其他字段信息，可根据需要调整卡片大小和排版
• 配置右侧的列表Web部件：将视图切换为列表视图，进入视图设置，仅保留「对应富文本」字段，隐藏标题、工具栏等不需要的元素
• 选中左侧的画廊Web部件，点击顶部菜单栏的「编辑Web部件」，找到「动态连接」选项，设置连接规则为：左侧选中条目时，右侧列表Web部件筛选匹配对应条目，保存设置即可

配置完成后，点击左侧画廊中的任意图片，右侧区域会自动刷新展示对应的富文本内容，可直接匹配你需要的效果。

方案2：SPFx 自定义Web部件（高自定义度，适合复杂样式需求） #

如果默认Web部件的样式不能满足设计要求，可以通过开发SPFx React Web部件实现：

• 初始化SPFx React项目，安装@pnp/sp和@pnp/spfx-controls-react依赖简化开发
• 组件结构拆分两个固定区域：左侧图片展示区、右侧富文本渲染区
• 组件挂载时通过spHttpClient或PnP JS请求提前建好的存储列表，拿到所有图片和对应富文本数据，遍历渲染左侧图片列表
• 给每个图片绑定点击事件，点击时将对应条目的富文本内容赋值给右侧渲染变量，富文本内容可直接通过RichText组件渲染，自动适配格式
• 打包编译Web部件，部署到站点应用目录后，即可添加到任意页面使用

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