Builder.io 反应 SDK v2
这是反应V2 SDK, @builder.io/sdk-react它是对SDK的完全改写,并具有以下好处:
- 零客户端依赖性
- 大小小得多( 25kb)
注:如果在无服务器环境(如下个或氢)上部署的网络app中使用SDK,则可能需要从中导入SDK @builder.io/sdk-react/edge。这是处理围绕无服务器环境的边缘大小写的特殊导入.
最低限度支持的版本
这个 peerDependencies 许可 反应 QQ16 (和回放19发布候选. 这是一个安装范围,而不是对反应16的积极支持的保证;参见 框架版本矩阵。 。 。 .
API 参考
要使用SDK,你必须:
-
使用
fetchOneEntry: 您可以在这里看到如何使用它 https://www.builder.io/c/docs/content-api (中文(简体) ),它如何区别于反应 V1 SDK'sbuilder.get()函数. -
将数据传递给
Content组件。 以下是一个简化的例子,显示您将如何同时使用:
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-react';
import { useEffect, useState } from 'react';
const BUILDER_PUBLIC_API_KEY = 'YOUR API KEY';
function App() {
const [content, setContent] = useState(undefined);
useEffect(() => {
fetchOneEntry({
model: 'page',
apiKey: BUILDER_PUBLIC_API_KEY,
userAttributes: {
urlPath: window.location.pathname || '/',
},
}).then((content) => {
setContent(content);
});
}, []);
const shouldRenderBuilderContent = content || isPreviewing();
return shouldRenderBuilderContent ? (
<Content content={content} model="page" apiKey={BUILDER_PUBLIC_API_KEY} />
) : (
<div>Content Not Found</div>
);
}
看这个 实例 更多信息.
多个 Content 一个页面上的组件
每个 Content 包含一个可变容器或A/B测试的,其中插入了这些功能所需的帮助脚本的副本。 如果一个页面为数 Content 组件(例如页眉、页体和页脚),将其打包一次 BuilderScripts 援助者们只被派遣一次
import { BuilderScripts, Content } from '@builder.io/sdk-react';
export default function Layout({ children }) {
return <BuilderScripts nonce={cspNonce}>{children}</BuilderScripts>;
}
使用一个 BuilderScripts 上层 Content 使用这些特性,而不是每个周围一个 Content兄弟姐妹的包装纸 每人发一份 A 类 BuilderScripts 在另一棵树上筑巢 却一无所出 所以在树上再多放一棵 这个 nonce 道具是可选的,只有内容安全政策需要. BuilderScripts 总是释放帮助者,即使里面没有东西使用个性化或A/B测试,所以只将其放置在做测试的页面上.
Next.js App路由器
不要进口 BuilderScripts 从 @builder.io/sdk-react 直接在服务器组件中, 例如 app/layout.tsx。下一个.js在浏览器中为它加载不同的SDK构件,而不是您的 "use client" 构成部分用途 Content这样 Content 不能看到包装。 服务器 HTML 有一条帮助脚本, 浏览器为每条 Content,水合失败.
从客户端文件中再导出并导入:
// components/builder-scripts.tsx
'use client';
export { BuilderScripts } from '@builder.io/sdk-react';
// app/layout.tsx
import { BuilderScripts } from '../components/builder-scripts';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<BuilderScripts>{children}</BuilderScripts>
</body>
</html>
);
}
包装 Content 同一客户端组件内的组件也起作用.
微缩
此 SDK 是由 微缩。要看到Mitosis源代码,请去 这里。 。 。 .
特性支持
看SDK的状态 这些表格。 。 。 .
开始
npm install @builder.io/sdk-react
实例
获取
此套件使用抓取 。 见 这些文件 更多信息.