Javascript 在React中创建可重新订购的卡组件

我目前正在通过React工作，我正在建立一个投资组合网站。在工作页面上，我有3个平铺，最终会重叠。当一张卡被点击时，它会打开一个侧面板，并且（希望）激活的卡会走到前面，推动后面的其他卡来填充空间

我目前有卡，或标签工作，我只需要帮助如何重新安排他们点击

这是Tab.js组件

import PropTypes from 'prop-types';

class Tab extends Component {

  onClick = () => {
    const { label, onClick } = this.props;
    console.log('that tickles', {onClick})
    onClick(label);
  }

  render() {
    const {
      onClick,
      props: {
        activeTab,
        label,
        position,
        inactivePosition,
        style
      },
    } = this;
    console.log(this)

    let className = 'tab-list-item';

    if (activeTab === label) { 
      className += ' tab-list-active';
    }

    return (
      <div
        style={style}
        className={className}
        onClick={onClick}
      >
        {label}
      </div>
    );
  }
}

export default Tab;

在我的脑海中，我想象着构建一个阵列，简单地让第一张卡处于活动状态，然后当单击另一张卡时，该卡被发送到位置0，依此类推

我希望这就是一切。正如我所说的，我对反应非常陌生，对香草JavaScript不太陌生，但仍然非常环保。任何指导都将不胜感激，因为我现在有点陷入僵局

---

对于一个正在运行的演示，我将使用AWS Amplify临时主持它

嘿，约瑟夫，欢迎来到SO！你能不能花点时间修复你问题中的格式错误，并发布一个指向工作演示（如小提琴）的链接？请粘贴tabstyle.cssHey，谢谢！我已经添加了Css文件和一个指向pagechildren的工作演示的链接，这应该是可以呈现的。数组本身不会渲染。为了呈现子对象，您应该只使用

{children}

。如果要将其用作数组，只需将对象数组作为属性传递给

选项卡

，例如

选项卡

，例如

，然后在

选项卡

中使用它，并迭代属性而不是子属性。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './tabstyle.css'
import Tab from './tab.js';

class Tabs extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ 
      activeTab: tab
    });
  }
  render() {
    const {
      onClickTabItem,
      props: {
        children,
        position,
      },
      state: {
        activeTab,
        inactiveTab1,
        inactiveTab2,
      }
    } = this;
    return (
    <React.Fragment>
      {children.map((child) => {
        const { label } = child.props;
          return (
            <Tab
              activeTab={activeTab}
              key={label}
              label={label}
              onClick={onClickTabItem}

            />
          );
      })} 
        <div className="tab-content">
          {children.map((child) => {
            if (child.props.label !== activeTab) return undefined;
            return child.props.children;
          })}
        </div>
      </React.Fragment>
    );
  }

}
export default Tabs;

export default function Work() {

    return (


        <React.Fragment >
           <Tabs>
                <div label="Example1" position='1'>
                what in the world
                </div>
                <div  label="Example2" position='2'>
                lorem ipsum
                </div>
                <div  label="Example3" position='3'>
                Nothing to see here, this tab is!
                </div>
            </Tabs> 
        </React.Fragment>
    );

}

}
.tab-list-item {
    background-color:#fff;
    position: relative;
    transition: all .5s;
}

.tab-content {
    color: #fff;
    background-color: rgb(19, 47, 74);
    grid-area:1/13/span 9/ span 8;
    z-index: 5;
    padding:3em;
}


.tab-list-active {
    background-color: #f0f;


    grid-area: 2/3/span 4/ span 4;

}

.position2{
    grid-area:3/4/span 4/ span 4;

}

.position3{
    grid-area:4/5/span 4/ span 4;
}