我創建了一個函式來記憶背景關系值并在 React 中將它們作為渲染道具回傳，以避免在我不關心的值更改時重新渲染。（這很好用！）但是，我在輸入它時遇到了麻煩。
目標是讓子函式具有與訪問器的回傳型別相同的型別。
我遇到很多麻煩的部分是輸入這部分：
type ContextType = {
state:{ a:number; b:number; }
otherStuff:{ a:string; b:string }
}
export const ContextAccessor: <
T extends {
accessor: (ctx: ContextType) => ReturnType<T["accessor"]>;
children: (ctx: ReturnType<T["accessor"]>) => JSX.Element;
}
>(
args: T
) => JSX.Element = ({ children, accessor }): JSX.Element =>
我的訪問器函式被鍵入accessor: (ctx: ContextType) => any，然后使該函式children也具有任何輸入引數型別。
我認為這是因為ReturnType<T["accessor"]>實際上不起作用
完整的代碼（沒有記憶）如下：
type ContextType = {
state:{ a:number; b:number; }
otherStuff:{ a:string; b:string }
}
export const ContextAccessor: <
T extends {
accessor: (ctx: ContextType) => ReturnType<T["accessor"]>;
children: (ctx: ReturnType<T["accessor"]>) => JSX.Element;
}
>(
args: T
) => JSX.Element = ({ children, accessor }): JSX.Element => {
const { state, modifiers, accessors } = useMyContext();
const accessed = useMemo(
() => accessor({ state, modifiers, accessors }),
[state, modifiers, accessors]
);
return children(accessed)
};
export const Test = () => {
return (
<ContextAccessor accessor={(ctx) => ctx.state.a}>
{(transfer) => (
<div>
<div>{JSON.stringify(transfer)}</div>
</div>
)}
</ContextAccessor>
);
};
我嘗試過的更多東西的編輯
我認為以下內容不起作用，因為ReturnType<Props<T>["accessor"]>型別為未知并且不是通用的。
type Props<T> = {
accessor: (context: ContextType) => unknown;
children: (ctx: ReturnType<Props<T>["accessor"]>) => JSX.Element;
};
export function StagingBuilderContext<T>(props: Props<T>): JSX.Element {
uj5u.com熱心網友回復：
accessor您可以通過向prop 函式引數添加顯式型別簽名來使其作業： ctx~> ctx: ContextType。
export const Test = () => {
return (
<ContextAccessor accessor={(ctx: ContextType) => ctx.state.a}>
{(transfer) => ( // inferred type for transfer is number
<div>
<div>{JSON.stringify(transfer)}</div>
</div>
)}
</ContextAccessor>
);
};
有了這個斷言，accessor回傳值是立即可用的，而不是必須從它的使用中推斷出來，這樣就可以正確推斷children. 我不完全確定ReturnType<T["accessor"]>在accessor屬性中使用，因為它指的是它自己，但它似乎確實可以正常作業。另一種方法是使用型別引數作為回傳型別。
TypeScript 游樂場
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445922.html