如何通過單擊按鈕動態設置組件。 （反應）

Question

我想在單擊菜單中的不同按鈕時動態顯示組件。 例如，我的菜單欄左側有帶有按鈕的菜單，右側有相應的組件。

菜單示例圖片

當我單擊按鈕時，它將按鈕的名稱設置為 state 並使用此 state 調用相應的組件。 下面是我的代碼。 我想擺脫“const dynamicComponent 函數”並使用更簡單的方法來使用字符串調用組件。

例如，如果我單擊 displayNone 按鈕並設置 DisplayNone 的 state。 我想在沒有單獨的 function 的情況下使用它來調用。 這應該適用於所有不同的按鈕。 有沒有辦法做到這一點？

APP代碼

import {
  Sidebar,
  SidebarDemo,
  DisplayNone,
  Gsap,
  GsapScrollMagic,
  GoogleMaps,
  ClipImage,
  LinearGradient,
  ButtonActive,
  ExportFunction,
  Axios,
  Telephone,
  MailTo,
  InputSearch,
  MapFilter,
  ColumnSize,
} from "./components";

function App() {
  const [comp, setComp] = useState("");

  const handleClick = (name) => {
    setComp(name);
  };

  const dynamicComponent = () => {
    switch (comp) {
      case "DisplayNone":
        return <DisplayNone />;
      case "Gsap":
        return <Gsap />;
      case "Gsap & ScrollMagic":
        return <GsapScrollMagic />;
      case "GoogleMaps":
        return <GoogleMaps />;
      case "Clip Image":
        return <ClipImage />;
      case "Linear Gradient":
        return <LinearGradient />;
      case "Button Active":
        return <ButtonActive />;
      case "Sidebar":
        return <Sidebar />;
      case "Export Function":
        return <ExportFunction />;
      case "Axios":
        return <Axios />;
      case "Telephone":
        return <Telephone />;
      case "Mail To":
        return <MailTo />;
      case "Input Search":
        return <InputSearch />;
      case "Map & Filter & Sort & Clone":
        return <MapFilter />;
      case "Column Size":
        return <ColumnSize />;
      default:
        return <Axios />;
    }
  };

  return (
    <div className="App">
      <Container fluid className="no-padding">
        <Row>
          <Col xs={3}>
            <SidebarDemo handleClick={handleClick} />
          </Col>
          <Col className="comp no-padding">{dynamicComponent()}</Col>
        </Row>
      </Container>
    </div>
  );
}

側邊欄代碼

import React, { useState } from "react";
import Data from "../../Data.json";

const SidebarDemo = ({ handleClick }) => {
  const [clickedName, setClickedName] = useState("");
  const [query, setQuery] = useState("");

  const makeActive = (name) => {
    handleClick(name);
    setClickedName(name);
  };

  const modifiedData = Data.filter((item) => {
    return item.toLowerCase().includes(query.toLowerCase()) ? item : null;
  });

  const sortedData = modifiedData.sort((a, b) => a.localeCompare(b));

  return (
    <div className="flex-column align-items-center sidebar">
      <br />
      <h4>Damon's Library</h4>
      <br />
      <input
        type="text"
        placeholder="Search.."
        className="sidebar-input-box"
        onChange={(e) => setQuery(e.target.value)}
        value={query}
      />
      <br />
      <div className="mr-auto flex-column button-bar">
        {sortedData.map((data, i) => (
          <span
            className={"sidebar-button" + (data === clickedName ? " button-active" : "")}
            key={i}
            onClick={() => makeActive(data)}>
            {data}
          </span>
        ))}
      </div>
    </div>
  );
};

export default SidebarDemo;

Data.json 包含 [Item1, Item2, Item3, ...]

Answer 1

一種解決方法可以是這樣，

第一次導入所有組件（非解構）

import * as AllComponents from "./components";

然后創建一個新變量，該變量提取具有動態名稱的確切組件，

const DynamicComponent = AllComponents[comp]

然后渲染那個 Dynamic 組件

<DynamicComponent />