React：如何为具有不同权限的两种类型的用户呈现包含多个组件和表单的同一页面？

Question

我有一个页面，里面有一些组件。我想根据用户的角色 (mentor/student) 有条件地呈现此页面，并且他们每个人都可以访问编辑一些组件但可以看到所有页面

Answer 1

你想要的是条件渲染，有多种方法可以实现它......一个天真的方法是：

import React from "react"

export default function Example() {
  // this can be replaced by something more complex
  const credentials = "1"

  if (credentials === "1") {
    return <UserForm />
  }

  return <AdminForm />
}

此外，您可以在组件中添加条件渲染...

import React from "react"

export default function UserForm({ credentials }) {

  return (
    <div>
    {credentials === "1" ? <div>Hi</div> : <div>Ciao</div>}
    </div>
  )
}

React：如何为具有不同权限的两种类型的用户呈现包含多个组件和表单的同一页面？

React: How to render same page that includes multiple components and forms for 2 types of user with different permissions?

reactjs

render

use-context