reactjs - React hooks 组件重载

问题描述

我正在构建一个 typescript react 应用程序，该应用程序具有一个名为 Accordion 的子组件，单击该组件时将其打开。打开时，它会呈现一个包含一些数据的表。该手风琴是根据可以使用选择器更改的组制作的。我的问题是，当我通过 Accordion 组件更改此组时，我希望它在打开时关闭。我试图通过一个道具来关闭手风琴，但没有任何反应，我开始感到沮丧。如何重新加载此组件以关闭状态？那是我的代码：

这是我的手风琴组件：

import React, { useState, useRef, Fragment, ReactChildren, ReactNode } from "react";
import Chevron from "./Chevron"

interface accordionPropsType {
    title: string
    children: ReactNode
}

const Accordion = (props: accordionPropsType) => {

    const [setActive, setActiveState] = useState("");
    const [setHeight, setHeightState] = useState("0px");
    const [setRotate, setRotateState] = useState("accordion__icon");

    const content = useRef(null);

    const toggleAccordion = () => {
        setActiveState(setActive === "" ? "active" : "");
        setHeightState(setActive === "active" ? "0px" : `${content.current.scrollHeight}px`);
        setRotateState(setActive === "active" ? "accordion__icon" : "accordion__icon rotate");
    }

    return(
        <Fragment>
            <div className="accordion__section">
                <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
                    <p className="accordion__title">{props.title}</p>
                    <Chevron className={`${setRotate}`} width={10} color={"#777"} />
                </button>
                <div
                    ref={content}
                    style={{ maxHeight: `${setHeight}` }}
                    className="accordion__content"
                >
                    {props.children}
                </div>
            </div>
            <style jsx>
            {`
                /* Style the accordion section */
                .accordion__section {
                    display: flex;
                    flex-direction: column;
                    margin: 10px;
                }
                
                /* Style the buttons that are used to open and close the accordion panel */
                .accordion {
                    background-color: #eee;
                    color: #444;
                    cursor: pointer;
                    padding: 18px;
                    display: flex;
                    align-items: center;
                    border: none;
                    outline: none;
                    transition: background-color 0.6s ease;
                }
                
                /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
                .accordion:hover,
                .active {
                    background-color: #ccc;
                }
                
                /* Style the accordion content title */
                .accordion__title {
                    font-family: "Open Sans", sans-serif;
                    font-weight: 600;
                    font-size: 14px;
                    text-align: left;
                }
                
                /* Style the accordion content panel. Note: hidden by default */
                .accordion__content {
                    background-color: white;
                    overflow: auto;
                    transition: max-height 0.6s ease;
                    margin: 5px;
                }
                
                /* Style the accordion content text */
                .accordion__text {
                    font-family: "Open Sans", sans-serif;
                    font-weight: 400;
                    font-size: 14px;
                    padding: 18px;
                }
            `}
            </style>
        </Fragment>
    );
}

export default Accordion;

这是调用此子组件的组件：

import React, { useState, Fragment, useEffect, FormEvent } from "react"
import Select from "../components/Select"
import Accordion from "../components/Accordion"
import Table from "../components/Table"

interface findingsType {
    body: object
    header: Array<headersType>
}

interface headersType {
    className: string
    rows: Array<rowType>
}

interface rowType {
    className: string
    rowspan: number
    colspan: number
    text: string
}

const CloudFindingsList = (props) => {

    const [groupBy, setGroupBy] = useState<Array<string>>([]);
    const [tableData, setTableData] = useState<findingsType>(null);

    const headerRows = [] as Array<rowType>

    const headers = [{
        className: "thead_custom" as string,
        rows: headerRows
    }] as Array<headersType>


    console.log('eee')

    const getGroupBy = (event) => {

        let distinctGroupsBy = []
        let allFindings = {}

        props.findings.map(finding => {
            let value = finding[event.target.value]
            distinctGroupsBy.includes(value) ? '' : distinctGroupsBy.push(value)
        })            

        distinctGroupsBy.map(order => {
            allFindings[order] = []
        })

        props.findings.map(finding => {
            let value = finding[event.target.value]
            distinctGroupsBy.map(order => {
                value == order ? allFindings[order].push(finding) : ''
            })
        });

        setGroupBy(distinctGroupsBy)

        console.log(groupBy)

        Object.keys(allFindings[distinctGroupsBy[0]][0]).map(value => {
            headerRows.push({
                className: "" as string,
                rowspan: 0 as number,
                colspan: 0 as number,
                text: value as string
            })    
        })

        setTableData({
            header: headers,
            body: allFindings
        } as findingsType)
    }

    const listFindings = 
        groupBy.map((group, index) => {
            return(
                <Accordion title={group} key={index}>
                    <Table jsonData={tableData.body[group]} header={tableData.header}/>
                </Accordion>
            )
        })

    return(
        <Fragment>
            <Select 
                id='1' 
                options={[{"val": "severity", "text": "severity"}, {"val": "account", "text": "account"}, {"val": "service", "text": "service"}]} 
                placeholder='Group by'
                handleChange={getGroupBy as () => {}}
            />
            {listFindings}
        </Fragment>
    );
}

export default CloudFindingsList

您不必了解所有我想要的代码，当我更改选择器中的选定项目时，Accordion 将再次关闭。有没有人看到解决方案？谢谢！

标签： reactjs

reactjs - React hooks 组件重载

问题描述

解决方案

推荐阅读