Reactjs react js中的声明性组合与命令式组合

在react js中设计应用程序以提高可重用性时，我使用了选项卡，然后传递了选项卡和标题，如下所示

const tabs ={
   "tabHeader1": TabContent1,
   "tabHeader2": TabContent2

 }
<SwipableTabs tabs={tabs} />

const选项卡={
“tabHeader1”：TabContent1，
“tabHeader2”：TabContent2
}

现在，当我不得不基于许可向他们提供服务时，我产生了困惑，为了避免“如果有其他事情”的干扰，我设计了如下组件：

<ProtectedAction>
{children}
</ProtectedAction>

{儿童}

我的ProtectedAction组件将检查权限，并基于该权限呈现子级。这正是react建议的（声明性的）

现在，当我看到上面的例子，比如tabs，它是数据驱动的，我不得不再次使用if-else，我想去掉它。 请建议是否有更好的方法