javascript - React 上的可切换面板

Question

我想在 React 上制作一个可切换的面板。它由一个小面板和一个大面板组成，通过单击小面板，您可以将其替换为大面板。而且，我想在面板中包含一个元素。请参考附图。 在此处输入图像描述

这是我的代码

panel.js 
import React, { useState } from "react";
import "./panel.css";

function Panel() {

  const [appState,changeState] = useState({
    activeObject: null,
    Objects : [{id: 1},{id: 2},{id: 3},{id: 4,} ]
  });

  function toggleActive(index) {
    changeState({...appState,activeObject: appState.Objects[index] })
  }

  function toggleActiveStyles(index){
    if(appState.Objects[index] === appState.activeObject) {
      return "box active";
    } else {
      return "box inactive";
    }
  } 
  return (
  <div classNameq="Panel">
    { appState.Objects.map((index) => (
      <div 
        key={index} 
        className={toggleActiveStyles(index)}
        onClick={() => {
        toggleActive(index);
      }}
      ></div>
    ))}
  </div>
  );
}

css
.Panel {
   display: flex;
   height: 100vh;
   justify-content: center;
   align-items: center;
   flex-flow: row-reverse;
}

.box {
   width: 200px;
   height: 200px;
   margin: 10px;
   transition: transform  0.3s ease-in-out;
}

.inactive{
   background-color: #3498db;
}

.active{
   transform: translate(-22.4%,0)scale(0.33);
   background-color: #c0392b;
}

我发现了一些类似于我想用 vue.js 编写的代码，但我无法将其翻译成 React。我会附上链接。 https://github.com/SimonZhangITer/DataVisualization/blob/master/src/components/dashboard/dashboard.vue

https://simonzhgiter.github.io/DataVisualization/#/dashboard

请帮我。

标签： javascriptreactjsonclick