無法根據用戶按鈕選擇ReactJS將不同的頁面合二為一

我不想根據用戶的頁面加載組件。

頁數：

• 可執行檔案
• 店鋪

在主螢屏中，我有一個帶有 2 個圖示的側邊欄，我希望主按鈕設定可執行檔案頁面和第二個商店頁面。就像擁有一個沒有路由和渲染組件的網頁，具體取決于用戶的選擇。

我的代碼：

Components/Dashboard.tsx

import styled from "styled-components"
import Executable from "./Executable"
import Navbar from "./Navbar"

import { useEffect } from "react"

type EntryProps = {
  section: string
}

const Dashboard = ({ section }: EntryProps) => {
  var TypeElement
  useEffect(() => {
    if (section === "executables") {
      TypeElement = (
        <div className="grid">
          <div className="row">
            <Executable />
          </div>
        </div>
      )
    }
  }, [section])

  return (
    <Section>
      <Navbar />
      {TypeElement}
    </Section>
  )
}

Components/Sidebar.tsx

import styled from "styled-components"
import { FaBars } from "react-icons/fa"
import { BsFileEarmarkBinary } from "react-icons/bs"
import { BiLogOut } from "react-icons/bi"
import { AiOutlineShoppingCart } from "react-icons/ai"
import { IoMdSettings } from "react-icons/io"

import { useState } from "react"

type SidebarProps = {
  section: string
  setSection: Function
}

const Sidebar = ({ section, setSection }: SidebarProps) => {
  const [disabled, setDisabled] = useState(true)
  const handleDisabled = () => setDisabled(!disabled)

  return (
    <Aside id="aside">
      <div
        className={disabled ? "brand center" : "brand"}
        onClick={handleDisabled}
      >
        <FaBars />
      </div>
      <ul className="links">
        <li>
          <BsFileEarmarkBinary />
          <span
            className={disabled ? "disabled" : ""}
            onClick={(e) => {
              console.log("Executables")
              setSection("executables")
            }}
          >
            Executables
          </span>
        </li>
        <li>
          <AiOutlineShoppingCart />
          <span
            className={disabled ? "disabled" : ""}
            onClick={(e) => {
              e.preventDefault()
              setSection("shop")
            }}
          >
            Shop
          </span>
        </li>
        <li>
          <IoMdSettings />
          <span
            className={disabled ? "disabled" : ""}
            onClick={setSection("settings")}
          >
            Settings
          </span>
        </li>
      </ul>
      <div className="logout">
        <BiLogOut />
      </div>
    </Aside>
  )
}

Pages/DashboardPage.tsx

import styled from "styled-components"

// Components
import Sidebar from "../components/Sidebar"
import Rightsidebar from "../components/Rightsidebar"
import Dashboard from "../components/Dashboard"

import { useState } from "react"

const DashboardPage = () => {
  const [page, setPage] = useState("executables")

  const setSection = (name: string) => {
    setPage(name)
  }
  
  return (
    <Div>
      <Sidebar section={page} setSection={setSection} />
      <Dashboard section={page} />
      <Rightsidebar />
    </Div>
  )
}

uj5u.com熱心網友回復：

您正在根據部分的值有條件地更改 TypeElement 的值。TypeElement 不是狀態，因此在更改 TypeElement 組件的值后不會重新渲染，并且更新后的值不會顯示在 UI 上。這里條件渲染可能是一個很好的解決方案。

<Section>
      <Navbar />
      {section==='executables'?  <Executable />: <Shop/>}
</Section>

標籤：反应打字稿

上一篇：如何在不使用強制轉換的情況下從兩個不同的物件有條件地設定狀態，每個物件都有自己的型別？

下一篇：特殊形式的Flutter材質提升