在typescript react中从用户视图隐藏道具

Question

我想创建两个组件，其中一个可以(或者可能只是必须(在另一个内部使用。像这样的东西：

Interface IChild {
name: string;
childKey?: string;
}
const Child: React.FC<IChild>= ({name,childKey})=>{
// do something here
} 

Interface IParent {
}
const Parent: React.FC<IParent>=({children})=>{
return (
<div>
{React.Children.map(children, (child, index) => {
const item = child as ReactElement<PropsWithChildren<IChild>>;
if (item.type === Child) {
return cloneElement(item, { childKey:uuid() });
} else {
return child;
}
})}
</div>
)
}

用法：

const App:React.FC<> = ()=>{
return (
<Parent>
<Child name="john"/>
<Child name="jane"/>
</Parent>
)
}

所以当Child在Parent内部使用时，Parent会添加childKey道具，而当Parent内部不使用时，不需要childKey，也没有用，我想最终将其作为包发布，不希望最终用户看到childKey道具，我只想在Parent内部使用Child的情况下添加它，所以用户不应该看到那个道具。我该怎么做？我应该这样做吗？

Answer 1

可能唯一的方法是将子级封装在片段中并设置片段的键。

// Parent.tsx
import React from "react";
import { Child } from "./Child";
interface IParent {}
export const Parent: React.FC<IParent> = ({ children }) => {
const childs = React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return null;
}
if (child.type === Child) {
return <React.Fragment key={`UUID-${uuid()}`}>{child}</React.Fragment>;
}
return child;
});
return <div>{childs}</div>;
};

然后if (child.key?.startsWith("UUID-")) { /* ... */ }

代码沙盒