Wrapper ReactJS

Question

У меня есть оболочка, которая позволяет мне определять роль пользователя для другого компонента. Я хотел бы добавить еще одну роль в последнем, но я не вижу, как это (роль этого "родителя") Если у вас есть идеи, я заинтересован

Вот моя обертка:

export default class Wrapper extends Component {
constructor() {
super();
this.state = {
  role: null
}
}

componentDidMount() {
let config = {
  headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${authentication.getToken()}`
  }
}
axios.get(`http://rec.mylittlegeek.school/api/whoami`, 
 config).then(response => {
  console.log(response);
this.setState({ role: response.data.role });
  }).catch(error => {
console.log(error);
})
}

render() {
return !this.state.role ?
"Loading ..."
: this.state.role === "admin" ?
<GeekSessions {...this.props} />
:
<GeekDashSessions {...this.props} />
}
}

Answer 1

Я бы не советовал вкладывать в вашу троицу больше условных выражений, просто используйте классическую, если она более читаема:

render() {
  const { role } = this.state;

  if (!role) {
    return <div>Loading ...</div>;
  }

  if (role === 'parent') {
    return <GeekParentSessions {...this.props} />;
  }

  if (role === 'child') {
    return <GeekChildSessions {...this.props} />;
  }

  return <GeekDashSessions {...this.props} />;
}

Answer 2

Это не самая красивая, но я это должен работать. Новый компонент GeekParentSessions для родительской роли.

return ({!this.state.role ?
  "Loading ..."
  : this.state.role === "admin" ?
  <GeekSessions {...this.props} />
  :
  this.state.role === "parent" ?
  <GeekParentSessions {...this.props} />
  :
  <GeekDashSessions {...this.props} />
})