Reactjs 反应钩组件重新加载
我正在构建一个typescript react应用程序,它有一个名为Accordion的子组件,当单击它时,它就会打开。打开时,它会呈现一个包含一些数据的表。这个手风琴是根据一个可以用选择器改变的组来制作的。我的问题是,当我通过我的手风琴组件更改这个组时,如果它被打开,我希望它关闭。我试图通过一个道具来关闭手风琴,但什么也没发生,我开始感到沮丧。如何重新加载此组件以关闭状态?这是我的密码: 这是我的手风琴组件:Reactjs 反应钩组件重新加载,reactjs,Reactjs,我正在构建一个typescript react应用程序,它有一个名为Accordion的子组件,当单击它时,它就会打开。打开时,它会呈现一个包含一些数据的表。这个手风琴是根据一个可以用选择器改变的组来制作的。我的问题是,当我通过我的手风琴组件更改这个组时,如果它被打开,我希望它关闭。我试图通过一个道具来关闭手风琴,但什么也没发生,我开始感到沮丧。如何重新加载此组件以关闭状态?这是我的密码: 这是我的手风琴组件: import React, { useState, useRef, Fragment
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
import React,{useState,useRef,Fragment,ReactChildren,ReactNode}来自“React”;
从“/Chevron”导入V形
界面手风琴{
标题:字符串
子节点:反应节点
}
常数手风琴=(道具:手风琴道具)=>{
const[setActive,setActiveState]=useState(“”);
常数[setHeight,setHeightState]=useState(“0px”);
常量[setRotate,setRotateState]=使用状态(“手风琴图标”);
const content=useRef(null);
常量TogleAccordion=()=>{
setActiveState(setActive==“”?“活动”:“”;
setHeightState(setActive==“active”?“0px”:“${content.current.scrollHeight}px`);
setRotateState(setActive==“活动”?“手风琴图标”:“手风琴图标旋转”);
}
返回(
{props.title}
{props.children}
{`
/*手风琴部分的风格*/
.手风琴组{
显示器:flex;
弯曲方向:立柱;
利润率:10px;
}
/*设置用于打开和关闭手风琴面板的按钮的样式*/
.手风琴{
背景色:#eee;
颜色:#444;
光标:指针;
填充:18px;
显示器:flex;
对齐项目:居中;
边界:无;
大纲:无;
过渡:背景色0.6s;
}
/*如果单击按钮(使用JS添加.active类),并将鼠标移到按钮上(悬停),则为按钮添加背景色*/
.手风琴:悬停,
.主动{
背景色:#ccc;
}
/*设置手风琴内容标题的样式*/
.手风琴标题{
字体系列:“开放式Sans”,无衬线;
字号:600;
字体大小:14px;
文本对齐:左对齐;
}
/*设置手风琴内容面板的样式。注意:默认情况下隐藏*/
.手风琴内容{
背景色:白色;
溢出:自动;
过渡:最大高度0.6s;
保证金:5px;
}
/*设置手风琴内容文本的样式*/
.手风琴文字{
字体系列:“开放式Sans”,无衬线;
字体大小:400;
字体大小:14px;
填充:18px;
}
`}
);
}
导出默认手风琴;
这就是调用这个子组件的组件:
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
import React,{useState,Fragment,useffect,FormEvent}来自“React”
从“./组件/选择”导入选择
从“./组件/手风琴”导入手风琴
从“./组件/表格”导入表格
接口查找类型{
主体:对象
标题:数组
}
接口头类型{
类名:string
行:数组
}
接口行类型{
类名:string
行跨度:编号
科尔斯潘:数字
文本:字符串
}
const CloudFindingsList=(道具)=>{
const[groupBy,setGroupBy]=useState([]);
const[tableData,setTableData]=useState(null);
常量headerRows=[]作为数组
常量头=[{
类名:“thead_custom”作为字符串,
行:头行
}]as数组
console.log('eee')
const getGroupBy=(事件)=>{
让distinctGroupsBy=[]
让所有发现={}
props.findings.map(finding=>{
let value=finding[event.target.value]
distinctGroupsBy.includes(值)?“”:distinctGroupsBy.push(值)
})
distinctGroupsBy.map(顺序=>{
所有调查结果[顺序]=[]
})
props.findings.map(finding=>{
let value=finding[event.target.value]
distinctGroupsBy.map(顺序=>{
值==订单?所有发现[订单]。推送(发现):“”
})
});
setGroupBy(distinctGroupsBy)
console.log(groupBy)
Object.keys(allFindings[distinctGroupsBy[0]][0]).map(value=>{
头推({
类名:“作为字符串,
行跨度:0作为数字,
colspan:0作为数字,
text:值作为字符串
})
})
可设置数据({
标题:标题,
正文:所有调查结果
}as findingsType)
}
常数列表结果=
groupBy.map((组,索引)=>{
返回(
)
})
返回(
{}}
/>
{listFindings}
);
}
导出默认CloudFindingsList
您不必理解所有代码,我只想在选择器中更改所选项目时,手风琴再次关闭。做一个