前端项目实战贰佰壹拾壹react-admin+material ui-react-admin-树状结构的三元判断

<Paper>
          <ListItem button style={mainId ? { background: '#ccc' } : {}} onClick={() => handleMainTitle()}>
            <ListItemText primary={categoryProdList.name} />
          </ListItem>
          {categoryProdList.children && categoryProdList.children.map((item: any, i: any) => (
            <Collapse in={true} timeout="auto" unmountOnExit>
              <List component="div" >
                <ListItem style={categoryColorId == item.id ? { background: '#ccc' } : {}} button onClick={() => handleCatagoryTitile(item.code, item.id)}>
                  <ListItemText primary={item.category_name} />
                  {openStyle ? <ExpandLess onClick={() => handleCatagory(item.code)} /> : <ExpandMore onClick={() => handleCatagory(item.code)} />}
                </ListItem>
                {item.t_prod_style.map((detailItem: any, j: any) => (
                  <Collapse in={openStyle} timeout="auto" unmountOnExit>
                    <List style={{ margin: "0px 0px 0 24px" }} component="div">
                      <ListItem style={styleColorId == detailItem.id ? { background: '#ccc' } : {}} button onClick={() => handleClickStyle(detailItem.code, detailItem.id)}>
                        <ListItemText primary={detailItem.style_name} />
                      </ListItem>
                    </List>
                  </Collapse>
                ))}
              </List>
            </Collapse>
          ))}

        </Paper>

运行结果