ReactJS 中的类别和子类别答案

【问题标题】：categories and sub categories in ReactJSReactJS 中的类别和子类别
【发布时间】：2021-01-21 11:33:34
【问题描述】：

您好，我正在尝试使用材质 ui 制作侧边栏菜单

此侧边栏菜单包含类别和子类别。

我有这个代码：

我想做什么？

I take some categories data from my Laravel API, on each categories they can have an object of sub categories, and I collapse this to show the sub categories from the parent category

If I collapse one every one collapse, this is normal because they share the same state, but I don't know how to make one state for each parent categories

const categoriesList = this.state.categories.map((item, k) => {
            return (
                <React.Fragment key={k}>
                    <ListItem button onClick={this.handleClick}>
                        <ListItemText primary={item.label} />
                        {item.category !== null ? this.state.open ? <ExpandLess /> : <ExpandMore /> : null}
                    </ListItem>
                    {item.category !== null ? <>
                        <Collapse in={this.state.open} timeout="auto" unmountOnExit>
                            <List component="div" disablePadding>
                                {item.category.map((ite,l) => <ListItem key={l} button className={classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
                            </List>
                        </Collapse>
                    </> : null}
                </React.Fragment>
            )
        })
``

【问题讨论】：

将“material-ui”添加到您的标签中

标签： reactjs api

【解决方案1】：

这是我的带有钩子的父组件

first time I use hooks

import React, {useState} from 'react';
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import Collapse from "@material-ui/core/Collapse";
import List from "@material-ui/core/List";


export function Category(props){
    const [open, setOpen] = useState(false);
    let handleClick = () => {
        setOpen(!open)
    }
    return (
        <React.Fragment key={props.id}>
            <ListItem button onClick={handleClick}>
                <ListItemText primary={props.categorie.label} />
                {props.category !== null ? open ? <ExpandLess /> : <ExpandMore /> : null}
            </ListItem>
            {props.category !== null ? <>
                <Collapse in={open} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        {props.category.map((ite,l) => <ListItem key={l} button className={props.classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
                    </List>
                </Collapse>
            </> : null}
        </React.Fragment>
    )
}

【讨论】：

【解决方案2】：

我建议您为每个类别创建一个组件。因此，您将拥有：

const categoriesList = this.state.categories.map((item, k) => {
    return <Category key={k} {...item} />;
});

在你的代码的其他地方你会有另一个组件：

const Category = (props) => {
    const [open, setOpen] = useState(false);
    function handleClick(e) { ... }
    return (
        <React.Fragment>
            <ListItem button onClick={handleClick}>
                <ListItemText primary={props.label} />
                    {props.category !== null ? open ? <ExpandLess /> : <ExpandMore /> : null}
                </ListItem>
                {item.category !== null ? <>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <List component="div" disablePadding>
                            {props.category.map((ite,l) => <ListItem key={l} button className={classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
                        </List>
                    </Collapse>
                </> : null}
            </React.Fragment>
    );

}

然后状态包含在 Category 组件中，您可以保持容器组件简单。

[note] 我更喜欢函数组件，所以在这里使用，但是类组件不会改变这个答案。

【讨论】：