时间戳

首页 > 解决方案 > 使用 React 和 Material UI 使用 Accordion 加载图像

javascript - 使用 React 和 Material UI 使用 Accordion 加载图像

问题描述

我有一个用 ui 材料制作的手风琴，每次打开手风琴选项卡时都需要加载不同的图像，但图像在手风琴之外，在另一个 div 中

这是当前代码：

export default function CustomizedExpansionPanels(
  items,
  id,
  expanded,
  setExpanded
) {
  const handleChange = panel => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };
  const { title, text, image } = items;

  return (
    <div>
      <ExpansionPanel
        expanded={expanded === `panel_${id}`}
        onChange={handleChange(`panel_${id}`)}
      >
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`panel_${id}d-content`}
          id={`panel_${id}d-header`}
        >
          <Typography>{title}</Typography>
        </ExpansionPanelSummary>
        <Grid container spacing={5}>
          <Grid item xs={12} sm={5}>
            <ExpansionPanelDetails>
              <Typography>{text}</Typography>
            </ExpansionPanelDetails>
          </Grid>
          <Grid item xs={12} sm={7}>
            <img
              src={image}
              alt=""
            />
          </Grid>
        </Grid>
      </ExpansionPanel>
    </div>
  );
}

但是图片是在ExpansionPanel里面加载的，效果很奇怪，需要在外面加载，怎么办？

标签： javascriptreactjsmaterial-ui

解决方案

一种可能的解决方案是添加条件代码以仅在图像展开时呈现图像。如果您移动<img>外部<ExpansionPanel>，您可以关闭您传递的扩展属性，并且仅在expanded === true.

<ExpansionPanel>
  [...]
</ExpansionPanel>
{expanded &&
  <img />
}

我在这里用material-ui做了一个简单的例子Accordion

推荐阅读