限制反应组件中的子组件

Posted 2023-02-22

【中文标题】限制反应组件中的子组件

【英文标题】：Limit child components in a react component

【发布时间】：2019-10-31 22:05:59

【问题描述】：

我有一个问题，我不确定是否可能。 这是一个示例代码。 我有一个组件，我希望他们每次使用我的组件和一个孩子 它应该只接受特定的组件。

例如：

<tableComponent>
   <tableHeaderComponent/>
   <tableHeaderComponent/>
   <tableHeaderComponent/>
</tableComponent>
but for this type it should not be accepted
<tableComponent>
   <th>blah</th>
   <th>blah2</th>
   <yourowncomponent/>
</tableComponent>

谢谢， 乒乓球

【问题讨论】：

***.com/questions/49706823/… 这可能是您的完美解决方案

好吧，我想说的是，只记录预期的用例而不提供该用例之外的任何支持就足够了。

【参考方案1】：

将displayName 分配给您要允许的组件，并在父组件内部检查子组件是否具有允许的displayName

const Good = () => <h1>Good</h1>;

Good.displayName = "Good";

const Bad = () => <h1>Bad</h1>;

const WithGoodOnly = ( children ) => 
  let allowed;
  if (Array.isArray(children)) 
    allowed = children.every(child => child.type.displayName === "Good");
   else 
    allowed = children.type.displayName === "Good";
  

  return allowed ? <div>children</div> : null;
;

渲染

const App = () => (
  <WithGoodOnly>
    <Good />
  </WithGoodOnly>
);

渲染

const App = () => (
  <WithGoodOnly>
    <Good />
    <Good />
  </WithGoodOnly>
);

未渲染

const App = () => (
  <WithGoodOnly>
    <Good />
    <Bad />
  </WithGoodOnly>
);