时间戳

首页 > 解决方案 > 在这种情况下如何单击按钮更改组件

reactjs - 在这种情况下如何单击按钮更改组件

问题描述

在此处输入图像描述

你好，我不知道点击左侧按钮时如何更改组件，所以它会将组件渲染到右侧，但只有我想要的那个，不是全部，我知道怎么做单击组件，它会使用 Switch 等将我转移到另一条路线，但情况似乎并非如此。有人可以帮我吗？

我不知道如何在右侧组件更改时将按钮保持在左侧

这是我的代码：

import { Component } from "react";
import UserManagement from "../UserManagement/index";
import RoleManagement from "../RoleManagement/index";
import QuizManagement from "../QuizManagement/index";

class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div class="admin-section">
                <div class="admin-control col-25">
/- 3 buttons for 3 components I want to render
                    <button>
                        <label>User management</label>
                    </button>
                    <button>
                        <label>Role management</label>
                    </button>
                    <button>
                        <label>Quiz management</label>
                    </button>
                </div>
                <div class="admin-modify col-75">
/- When I click button the component will display here, I just don't know how to parse it into here but only one, if it like this it'll render all 3 of it.
                    <UserManagement />
                    <RoleManagement />
                    <QuizManagement />
                </div>
            </div>
        );
    }
}

export default Admin;

标签： reactjs

解决方案

一个简单的解决方案是：

第 1 步：添加一个称为managementin的状态this.state = {}。像

  constructor(props) {
        super(props);
        // you can default this to any of the three
        this.state = {management: "user"};
  }

onClick第 2 步：在按钮上添加处理程序，例如

<button onClick={() => {this.setState({management: "user"}) }}>
 <label>User management</label>
</button>

<button onClick={() => {this.setState({management: "role"}) }}>
 <label>Role management</label>
</button>

<button onClick={() => {this.setState({management: "quiz"}) }}>
 <label>Quize management</label>
</button>

第 3 步：根据状态有条件地呈现您的表格。

 {this.state.managment === "user" && <UserManagement />}
 {this.state.managment === "role" && <RoleManagement />}
 {this.state.managment === "quiz" && <QuizManagement />}

第4步：打开:)。

推荐阅读