Pass Through 属性是一个 API，用于访问组件的内部 DOM 结构。
每个组件都有一个特殊的 pt 属性，用于定义一个对象，其键与可用的 DOM 元素相对应。每个值也是一个对象，用于定义要应用于元素的任意属性，例如样式、aria、data-* 或自定义属性。每个组件文档都有一个专门的部分来记录通过 PT 公开的可用部分名称。
pt 的最常见用法是样式和自定义。className 和 style 属性支持与相应的 classNames 类似的对象和条件的确切语法。下面的示例使用 PrimeFlex CSS 库设置 Panel 组件的样式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel
header="Header"
toggleable
pt={{
header: ({ state }) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
className: classNames('border-primary', {
'bg-primary': state.collapsed,
'bg-primary-reverse': !state.collapsed
})
}),
content: { className: 'border-primary text-lg text-primary-700' },
title: 'text-xl', // OR { className: 'text-xl' }
toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
}}
>
<p className="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
组件的生命周期钩子通过 hooks 属性作为 pass through 公开，以便可以注册回调函数。可用的回调是 useMountEffect、useUpdateEffect、useUnmountEffect。有关生命周期钩子的详细信息，请参阅 React.js 文档。
<Panel header="Header" pt={panelPT}>
Content
</Panel>
定义每个组件类型的共享 pass through 属性。例如，在下面的配置中，所有面板标题都具有 bg-primary 样式类，并且所有自动完成组件都具有固定的宽度。这些设置可以被特定组件覆盖，因为组件的 pt 属性比全局 pt 具有更高的优先级。
// _app.js
import { PrimeReactProvider } from "primereact/api";
export default function GlobalPTDemo() {
const pt = {
panel: {
header: { className: 'bg-primary' }
},
autocomplete: {
input: { root: { className: 'w-16rem' } }
}
};
return(
<PrimeReactProvider value={{ pt }}>
<App />
</PrimeReactProvider>
)
}
global 属性有一个 css 选项，用于定义属于全局 pt 配置的自定义 css。此功能的常见用例是定义与 pass through 属性配置相关的全局样式和动画。
// _app.js
import { PrimeReactProvider } from "primereact/api";
export default function CustomCSSDemo() {
const pt = {
global: {
css: `
button {
padding: 2rem;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`
}
};
return(
<PrimeReactProvider value={{ pt }}>
<App />
</PrimeReactProvider>
)
}
使用 usePassThrough 实用程序自定义现有的 pass through 配置。第一个参数是要自定义的对象，第二个参数是自定义项，最后一个参数是合并的行为。其中一个用例是自定义现有的无样式主题，例如 Tailwind。
import React from 'react';
import { PrimeReactProvider } from "primereact/api";
import { usePassThrough } from "primereact/passthrough";
import Tailwind from "primereact/passthrough/tailwind";
export default function UsePassThroughDemo() {
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
title: {
className: 'leading-none font-light text-2xl'
}
}
},
{
mergeSections: true,
mergeProps: false
}
);
return(
<PrimeReactProvider value={{ unstyled: true, pt: CustomTailwind }}>
<App />
</PrimeReactProvider>
)
}
mergeSections 定义是否添加主配置中的节，mergeProps 控制是否覆盖或合并定义的属性。mergeSections 的默认值为 true，mergeProps 的默认值为 false。
某些 CSS 库（例如 Tailwind）要求以非冲突的方式合并类名。为了支持它们，可以将 classNameMergeFunction 作为 ptOptions 对象的一部分传递，以手动定义如何合并类名。
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: false }
);
// Output:
// panel.header.className => 'my_panel_header'
// panel.title.className => Tailwind.panel.title.className
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: true }
);
// Output:
// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
// panel.title.className => Tailwind.panel.title.className
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: true }
);
// Output:
// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
// panel.title.className => undefined
const CustomTailwind = usePassThrough(
Tailwind,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: false }
);
// Output:
// panel.header.className => 'my_panel_header'
// panel.title.className => undefined