使用 Header 的 useState 和样式更改图表组件

Question

我目前正在学习编码，并构建一个包含四个图表的 react-component，单击 header 时这些图表会发生变化。一切正常，但活动 header 应该具有我在上面 styled-components 中定义的类名“open”。我试图用 classList.add 和 classList.remove 解决它，但它不起作用。谢谢你的建议。

 import styled from "styled-components";
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { coronadata_gesamt, coronadata_erst, coronadata_zweit, coronadata_auffrischung, coronaheader } from "../data";
import { useState } from "react";

const Container = styled.div`
    width:100%;
    padding:20px;
    position:relative;
    height:100%;
`;
const HeaderHolder = styled.div`
    display:flex;
    border-bottom: 1px solid var(--gray);
    width:30%;
    height:20px;
`;
const Header = styled.h3`
    margin-right: 10px;
    color: var(--gray);
    border: 1px solid var(--gray);
    padding:2px;
    background: var(--leightgray);
    opacity:0.5;
    cursor: pointer;

    & .open{
        border: 1px solid var(--gray);
        border-bottom: none;
        opacity:1;
        height:20px;
        background: var(--white);
        z-index:10;
    }
`;
const CardHolder = styled.div`
    width:100%;
    padding:10px;
    position:absolute;
    top:50px;
    left:0;
    & .responsive{
        width: 80%;
        aspect-ratio: 4 / 1;
`;

const Chart = () => {
    
        const [gesamtOpen, setGesamtOpen] = useState(true);
        const [erstOpen, setErstOpen] = useState(false);
        const [zweitOpen, setZweitOpen] = useState(false);
        const [auffrischungOpen, setAuffrischungOpen] = useState(false);

   const handleClick = (name)=>{
        if(name === "Gesamt"){
            setGesamtOpen(true);
            setErstOpen(false);
            setZweitOpen(false);
            setAuffrischungOpen(false);
        }
        else if(name === "Erst**"){
            setErstOpen(true);
            setGesamtOpen(false);
            setZweitOpen(false);
            setAuffrischungOpen(false);
        }
        else if(name === "Zweit"){
            setZweitOpen(true);
            setErstOpen(false);
            setGesamtOpen(false);
            setAuffrischungOpen(false);
        }
        else{
            setZweitOpen(false);
            setErstOpen(false);
            setGesamtOpen(false);
            setAuffrischungOpen(true);

        }
   }
  return (
    <Container>
    <HeaderHolder id="headerHolder">
    {
        coronaheader.map((header)=>(
            <Header key={header.id} onClick={()=>handleClick(header.name)}>{header.name}</Header>
        ))
    }
    </HeaderHolder>
       
        <CardHolder>
        {
            gesamtOpen &&
        <ResponsiveContainer className="responsive">
            <AreaChart data={coronadata_gesamt}>
                <CartesianGrid strokeDasharray="2 2"/>
                <XAxis dataKey="name" stroke="gray"/>
                <YAxis/>
                <Tooltip/>
                <Area
                    type="monotone"
                    dataKey="uv"
                    fill="green"
                />
                 <Area
                    type="monotone"
                    dataKey="pv"
                    fill="gray"
                />
            </AreaChart>
        </ResponsiveContainer>
        }
        {
            erstOpen &&
        <ResponsiveContainer className="responsive">
            <AreaChart data={coronadata_erst}>
                <CartesianGrid strokeDasharray="2 2"/>
                <XAxis dataKey="name" stroke="gray"/>
                <YAxis/>
                <Tooltip/>
                <Area
                    type="monotone"
                    dataKey="uv"
                    fill="green"
                />
               
            </AreaChart>
        </ResponsiveContainer>
        }
        {
            zweitOpen &&
        <ResponsiveContainer className="responsive">
            <AreaChart data={coronadata_zweit}>
                <CartesianGrid strokeDasharray="2 2"/>
                <XAxis dataKey="name" stroke="gray"/>
                <YAxis/>
                <Tooltip/>
                <Area
                    type="monotone"
                    dataKey="uv"
                    fill="green"
                />
                 <Area
                    type="monotone"
                    dataKey="pv"
                    fill="gray"
                />
            </AreaChart>
        </ResponsiveContainer>
        }
        {
            auffrischungOpen &&
        <ResponsiveContainer className="responsive">
            <AreaChart data={coronadata_auffrischung}>
                <CartesianGrid strokeDasharray="2 2"/>
                <XAxis dataKey="name" stroke="gray"/>
                <YAxis/>
                <Tooltip/>
                <Area
                    type="monotone"
                    dataKey="uv"
                    fill="green"
                />
                 <Area
                    type="monotone"
                    dataKey="pv"
                    fill="gray"
                />
            </AreaChart>
        </ResponsiveContainer>
        }
        </CardHolder>
    </Container>
  )
}

export default Chart

Answer 1

要实现这一点，您需要在 styled-component Header 中定义 .open class 属性。然后传一个boolean到Header样式中去切换一个.open class.

How to use it attrs Documentation

我创建了一个简单的例子。

使用 Header 的 useState 和样式更改图表组件

Changing charts component with useState and style of Header

reactjs

styled-components