Declarative combination and imperative in ReactJS
When designing an application in react js to improve reusability, I used Tabs, and then passed the Tabs and headers to similar
const tabs ={
"tabHeader1": TabContent1,
"tabHeader2": TabContent2
}
<SwipableTabs tabs={tabs}>
Now, when I had to grant them based on permissions, I was confused. To avoid other problems, I designed the following components:
<ProtectedAction>
{children}
My ProtectedAction component will check permissions and present children based on the permissions. What the reaction implies (declarative).
Now, when I see the examples above (such as data-driven tabs), I have to use other examples that I want to get rid of again.
const tabs ={
"tabHeader1": TabContent1,
"tabHeader2": TabContent2
}
<SwipableTabs tabs={tabs}>
Now, when I had to grant them based on permissions, I was confused. To avoid other problems, I designed the following components:
<ProtectedAction>
{children}
My ProtectedAction component will check permissions and present children based on the permissions. What the reaction implies (declarative).
Now, when I see the examples above (such as data-driven tabs), I have to use other examples that I want to get rid of again.
Comments
Post a Comment