Gatsby Slice API
对 Gatsby Slice API 的支持已添加在
gatsby@5.0.0中。
Gatsby 包含一个 <Slice> React 组件和一个 createSlice 操作，位于 gatsby-node 中，用于帮助加快您网站上的常见更新。通过将常见组件提取到单独的 HTML 文件中，可以单独构建常见组件，并与现有页面“缝合”在一起。
名为“Slice placeholder”的 <Slice> React 组件。通过 component 键传递给 createSlice 的 React 组件也称为“Slice component”。
createSlice 操作
来自 createPages API 的 createSlice 操作是创建新 Slice 的第一步。
| 参数 | 类型 | 描述 |
|---|---|---|
id (必需) | string | 此特定 Slice 的唯一标识符。另请参阅：别名 |
component (必需) | string | 用作 Slice 组件的组件路径。 |
context | object | 传递给 component 作为 sliceContext 的对象。 |
<Slice> 占位符
名为“Slice placeholder”的 <Slice> 组件需要一个 alias prop。任何其他 prop 都将传递给底层组件。
| Prop | 类型 | 描述 |
|---|---|---|
alias (必需) | string | 在 gatsby-node 中创建的用于替换此占位符的 Slice 组件。另请参阅：别名 |
别名
Slice 的“alias”是页面用于识别要渲染的 Slice 组件的字符串值。使用 alias 而不是（来自 createSlice 的）id 的原因是，每个别名都是为每个创建的页面进行一对一的映射。默认情况下，为 createSlice 中给出的每个 id 都会创建一个 alias。因此，如果 Slice 占位符被赋予 alias prop "my-image"，则 id 为 "my-image" 的 Slice 组件将被使用。
但是，如果您需要根据页面自定义使用的 Slice 组件，您可以在 createPage 中通过 slices 键传递一个 alias 到 id 的映射。如果您将 "my-image" 映射到 "my-image--dog"，那么任何时候使用 "my-image" Slice 占位符，在那个页面上它都会使用 id 为 "my-image--dog" 的 Slice 组件。
查询
Slices 可以像 Pages 一样使用“slice queries”，即 page queries。通过导出 graphql 查询，您可以在 slice 中查询 Gatsby 的数据层。变量可以从 createSlice 中传递的 context 中访问。
使用 <Slice> 占位符的限制
JSS 和 styled-components 支持
在 Slice 组件中使用 styled-components 或 JSS 目前不支持。或者，您可以使用 emotion 或普通 CSS。
必须在 src 目录中
Slice 占位符必须在嵌套在您的站点顶层 src 目录下的文件中使用。例如：
Slice 占位符在这些文件中可用
<SITE_ROOT>/src/my-page.js<SITE_ROOT>/src/components/my-component.js
Slice 占位符不在这些文件中可用
<SITE_ROOT>/other-components/other-component.js<SITE_ROOT>/other-library/other-component.js
嵌套切片
Gatsby 不支持嵌套的 Slice 占位符。这意味着，如果您有一个高级 <Layout> 组件作为 slice 组件，那么在该 <Layout> 组件内的任何地方都不能存在其他 Slice 占位符。
上下文
Slice 占位符不继承其父组件的上下文。如果需要上下文，其提供者可以添加到 wrapRootElement 中，或者其值可以直接传递给 Slice 组件（只要它符合其他 props 的限制）。
Props
alias
alias prop 必须是静态可分析的，这意味着它必须是一个内联字符串。
children
children prop 没有限制，可以以常规方式使用。
其他
传递给 Slice 占位符的任何 prop 都必须是可序列化的。
以下方法无效
然而，一个以（例如）字符串结尾的 prop 是可以的