可视化编辑设置
当你定义一个集合时，TinaCMS为你提供一个全页编辑器窗口来添加内容。
TinaCMS在与React一起使用时还允许进行"可视化编辑"。这是一种设置，允许你的网站和编辑器窗口并排显示，实时展示你的更改。
可视化编辑要求 – 在页面可以设置为可视化编辑之前，它必须：
用法
为了在编辑时更新页面，你需要重新水合页面数据。在React（或基于React的框架如NextJS）中，你可以使用useTina钩子为页面配置可视化编辑。
这个钩子可以与代码中的内容区域关联，并在侧边栏中注册相应的字段以进行重新水合。
在生产环境中，这个钩子只会传递其初始数据值。
useTina应提供三个参数：
data：这是你从TinaCMS API收到的GraphQL响应。
如果你使用了TinaCMS客户端函数进行数据获取，这三个返回值可以直接插入到useTina钩子中。
示例
NextJS的可视化编辑
使用指定表单的可视化编辑（实验性）
TinaCMS的实验性通过ID选择表单功能允许开发者在页面上存在多个useTina钩子（或查询）时选择在可视化编辑侧边栏中显示哪个表单。默认情况下，使用第一个请求的查询来确定表单。然而，通过使用此功能，你可以确保在TinaCMS侧边栏中使用特定的表单——例如，与页面集合相关联的表单而不是全局配置的表单。当处理多个域时，这可能特别有用，因为你的网站的不同部分或区域需要不同的表单配置。
工作原理
在初始化useTina钩子时，你可以传递一个名为experimental___selectFormByFormId()的实验性回调。这个回调应该返回一个唯一的表单标识符，告诉TinaCMS在可视化编辑中应该显示哪个文档的表单。
示例
在上面的示例中，回调使用页面的relativePath生成一个表单ID，确保在侧边栏中使用适当的表单进行编辑。