如何在按钮单击时呈现不同的组件

Question

我的 UI 上有几个按钮，单击时我想使用 react 将相应的组件加载到它们，我不知道该怎么做。

早些时候我使用三元运算符执行此操作，但这仅适用于两个组件，这里我有两个以上的组件。

我点击后端有 5 个按钮，然后在 UI 上呈现内容。

请检查所有代码的代码沙箱

单击按钮时，我必须渲染组件并且这些组件具有不同的 UI 如果所有组件都具有相同的数据格式和相同的 UI，我可以使用 useState 完成此操作，但这里需要加载组件

Answer 1

首先，您的组件User, Admin and Client中有一些错误：它们在文件中具有相同的名称。 您可以像这样轻松解决您的问题：

import React, { useState } from "react";
import Buttons from "./Components/side_btns";
import { Admin, Client, User } from "./Components";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

const App = () => {
  const [activeTab, setActiveTab] = useState("");

  const onSideBtnClick = e => {
    console.log(e.target.value);
    setActiveTab(e.target.value);
  };

  return (
    <div className="App">
      <div className="row">
        <div className="col-5 col-sm-5 col-md-3 col-lg-2 col-xl-2">
          <Buttons trigerOnClickEmpSideBtn={onSideBtnClick} />
        </div>
        <div className="col-7 col-sm-7 col-md-9 col-lg-10 col-xl-10" />
        {activeTab === "admin" && <Admin />}
        {activeTab === "user" && <User />}
        {activeTab === "info" && <Client />}
      </div>
    </div>
  );
};
export default App;

这是一个例子。

Answer 2

我只是使用字典方法来使用按钮值呈现组件。 您可以检查代码和框。

const dynamicComponents = () => {
  const components = {
    admin: <Admin />,
    info: <Client />,
    user: <User />
  };

  return components[componentName];
};

Answer 3

保持 tabactive 的 state 并在它们之间切换，如：

          {tabactive == 1 ? (
            <Admin />
          ) : tabactive == 2 ? (
            <User  />
          ) : tabactive == 3 ? (
            <Security />
          ) : tabactive == 4 ? (
            <Profile />
          ) : null}