reactjs - 在 TypeScript React 中隱藏使用者檢視的屬性

我想創建兩個組件，其中一個可以（或者說必須）在另一個組件內使用。像這樣：

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 屬性，我只是想在 Child 被用在 Parent 時添加它，所以使用者不應該看到這個屬性。我該怎麼做呢？我應該這樣做嗎？

答案＃1

可能唯一的方法是將子元素包裹在片段中並設置片段的 key。

// 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-")) { /* ... */ }

CodeSandbox