小部件表面
你的 React 组件只需要渲染 iframe，调整它的大小，并可选择性地管理事件处理程序。
React 游戏组件
用于浏览器游戏的 React 游戏组件
React 团队无需从零开始构建游戏即可添加可玩组件。只需在 React 组件内渲染 `Games I Know` 和 `iframe`，传递框架 URL，并在父应用需要游戏状态时监听 `postMessage` 事件即可。
Iframe 组件
React消息监听器
响应式包装器
已签署完成支持
简答
使用框架路由，然后添加页面上下文。
在 React 中，为 /embed/{gameSlug}/frame/ 创建一个小的 iframe 组件，将 tenantId 作为 URL 参数传递，并为 Games I Know 事件附加一个消息监听器。
试试这款兼容 React 的游戏组件
该演示展示了 iframe 以及您的 React 应用可以订阅的父页面事件。
React 开发者正在添加游戏 embed
为什么 React 团队会使用 iframe 小部件
iframe 可以将游戏运行时与您的应用程序分开，同时仍然允许基于事件的集成。
无游戏引擎捆绑包
该游戏不会通过增加棋盘逻辑、资源或实时代码来增加您的 React 应用程序包。
清晰的整合边界
父应用程序可以对事件做出反应，而无需直接耦合到游戏内部。
设置流程
如何在 React 中使用 embed 来创建一个游戏组件
将 iframe 包装在一个组件中，如果需要，缓存帧 URL，并在卸载时清理消息监听器。
步骤 1
创建 GameWidget 组件
渲染一个宽度为 100%、高度固定、允许“全屏”的 iframe，以及 Games I Know 框架 URL。
步骤 2
传递租户配置
使用租户 ID 和可选的 campaignId 构建 src，以便保持仪表板数据的有序性。
步骤 3
聆听使用效果
附加 window.addEventListener("message", handler) 并过滤 data.source 为 gamesiknow 的消息。
步骤 4
奖励前请核实。
如果 React 应用解锁了奖励，请在授予任何奖励之前调用后端并验证签名结果。
执行
React 实现说明
保持 iframe 组件简洁。大多数 bug 都源于不稳定的大小设置、重复的监听器，或者过度依赖浏览器消息。
使用稳定的密钥
不要在每次父级渲染时都重新挂载 iframe。除非游戏或租户设置发生更改，否则请保持源文件稳定。
清理听众
从 useEffect 返回一个清理函数，这样 React 开发模式就不会留下重复的事件处理程序。
将用户界面与验证功能分离
React 可以快速显示结果，但奖励或积分的决定应该在您的服务器上进行。
可玩游戏
选择适合页面的游戏
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed 设置
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed 设置
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed 设置
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed 设置
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
常问问题
关于React 游戏组件的常见问题
/embed/{gameSlug}/ 和 /embed/{gameSlug}/frame/ 有什么区别？
使用 /embed/{gameSlug}/frame/ 作为 iframe 的 src。该路由是为网站 embed 和 postMessage 事件构建的轻量级游戏框架。/embed/{gameSlug}/ 路由是面向用户的公开预览和 SEO 页面，不应放置在 iframe 内。
访客需要下载应用程序或创建帐户吗？
不。访客可以在手机、平板电脑、笔记本电脑或台式机上的浏览器iframe内进行游戏。只有安装embed的网站所有者才需要合作伙伴帐户。
我可以将 embed 限制在我自己域内吗？
是的。Games I Know 和 embed 是围绕注册网站和域名受限的租户设置设计的，因此复制的 iframe 代码不能在未经授权的网站上随意重复使用。
哪些Games I Know标题目前是embed可执行的？
Tic Tac Toe、Four in a Row、Bingo 和 I Know 可作为 embed 浏览器游戏使用。embed 文档在所有受支持的游戏中使用相同的事件模型。
Games I Know 是一个 React 包吗？
不，Games I Know 和 embed 是基于 iframe 的。这样既能保持设置与框架无关，又能确保在 React 组件内部流畅运行。