如何使组件仅在少数用户集中可见/可用？

Question

I have a scenario where i need to show a component only to the admins not for the regular users.

Say,

<Parent>
  <ChildOne />
  <ChildTwo />     // This component should be rendered for public users.
  <ChildThree />
</Parent>

What i have already tried

I passed isAdmin prop from the parent to the child to determine whether the component visible status.

 const ChildTwoComp =  props.isAdmin ? <ChildTwo /> : null
 render () {
   return (
     <Parent>
       <ChildOne />
       {ChildTwoComp}    
       <ChildThree />
     </Parent>
    )
  }

I don't think I am doing it right. Is there any other better solution or right way to do it.

I want something similar to PrivateRoute concept in Reactjs. Any help appreciated.

Answer 1

You can write a role based component and use it as a wrapper.

RoleBasedComponent.js

const RoleBasedComponent = ({ children, supportedRoles, role }) => {
  return (
    <div>
      {supportedRoles.indexOf(role) > -1 ? children : <h2>Access Denied</h2>}
    </div>
  );
};

export default RoleBasedComponent;

App.js

function App() {
  return (
    <RoleBasedComponent
      role={"admin"}
      supportedRoles={["admin", "support_admin", "user"]}
    >
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </RoleBasedComponent>
  );
}

Here is the demo https://codesandbox.io/s/ql9p2q0kxq

Answer 2

怎么样：

{!isAdmin && <ChildTwo />}

Answer 3

You can simply put your ternary inside the JSX :

render () {
  return (
    <Parent>
      <ChildOne />
      {this.props.isAdmin ? <ChildTwo /> : null}    
      <ChildThree />
    </Parent>
  )
}