在 React js 中单击项目后如何显示组件？

Question

所以为了让事情变得清晰和简单：
单击我的 Add User Item后，我的AdminDash组件上显示了一个AddUser组件，所有内容都显示在我的 AdminDash 上，
我的AdminDash包含SideMenu ， SideMenu包含Items ， Items包含Item列表让我向您展示树：

1. 添加用户。

2. 管理员破折号：

   • 侧边菜单：
     • 项目：
       1. 物品。
       2. 物品。
       3. 物品。

管理员破折号

//Some code
<SideMenu />
//Here where I want to show my addUser Component

侧边菜单

//Some code
<Items />

项目

//Some code
<Item Name="addUser" />
<Item Name="deleteUser" />
<Item Name="updateUser" />

物品

<ul>
  <li   
onClick={I WANT TO SHOW MY ADDUSER COMPONENT}
>
    <div> {props.Name} </div>
  </li>
</ul>

添加用户

//Some random code 
<p> this is the add user component</p>

所以每当我点击像 AddUser 这样的项目时，我希望它的组件显示在我的 Admin Dash 上，有什么提示吗？

Answer 1

因此，经过多次尝试和长期研究，我几乎使用 useContext 来完成这项工作，但最终我找到了解决方案，这些是步骤：

1. 首先，我添加了一个新组件<AdminOptions /> ，其中包含呈现我的<AddUser />和<DeleteUser />和<UpdateUsers />的所有逻辑。
2. 我通过最后一个子 ( <Item /> ) 传递了一个函数来调用它并将一些参数传递给父组件<AdminDash />以告知单击了哪个项目以及要呈现哪个项目。
3. 然后我使用这些参数并将它们再次传递给我的新组件 ` 以呈现该特定项目，它有点复杂并且层次结构很多，但它对我来说是一个完美的解决方案。

管理员破折号

const[componentId, setComponentId]= React.useState(false);
const [show, setShowComponent] = React.useState(false);

const handleClick=(id)=>{
      if(id===componentId){
        setShowComponent(!show);
      }
      else{
        setComponentId(id);
        setShowComponent(true);
      }
    }
return (
//Here I pass the handleClick hooks to the childs
<SideMenu handleClick={handleClick} />
//my new component who will render the items component
<AdminOptions whatToShow={componentId} show={show}  />
);

侧边菜单

//passing again the handleClick to childs
<Items handleClick={props.handleClick} />

项目

//I'm passing again the handleClick and giving each item an ID to differentiate between them 
<Item 
  Name="addUser"
  Id="AddUser"
  handleClick={props.handleClick} />
<Item 
  Name="deleteUser"
  Id="DeleteUser"
  handleClick={props.handleClick} />
<Item 
  Name="updateUser"
  Id="UpdateUser"
  handleClick={props.handleClick} />

物品

<ul>
//here in the onClick i pass the function handleclick with an item id as a parameter
  <li   
onClick={()=>{props.handleClick(props.Id)}}
>
    <div> {props.Name} </div>
  </li>
</ul>

管理员选项

//So here is a switch case conditional rendering depending on Item's ID
switch (props.whatToShow){
            case "AddUser":
                return(props.show && <AddUser />);
            case "DeleteUser":
                return(props.show && <DeleteUser />);
            case "UpdateUser":
                return(props.show && <UpdateUser />);
            default :
                return (<> </>);

因此，当我单击添加用户项目时，它将该特定项目的 Id 传递给父组件（AdminDash），父组件（AdminDash）使用项目的 Id 执行该 handleClick，并使 AdminOptions 在 AdminDash 中显示该项目组件，我尽力了为了尽可能清楚，任何有问题的人都可以在评论中留言。