使用 React 和 Material UI 使用 Accordion 加载图像答案

【问题标题】：Image load with Accordion using react and Material UI使用 React 和 Material UI 使用 Accordion 加载图像
【发布时间】：2021-04-14 19:57:02
【问题描述】：

我在 react 中有一个用 ui 材料制作的 Accordion，每次打开 Accordion 选项卡时都需要加载不同的图像，但图像在 Accordion 之外，在另一个 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>
  );
}

但是图片是在inside ExpansionPanel 加载的，效果很奇怪，需要在outside加载，我该怎么做？

【问题讨论】：

您的标签位于内。如果您将它移到之外，它会按照您想要的方式工作吗？
@CarsonEsplin 这样它会显示所有打开的图像，而不仅仅是当我单击打开 Accordeon 时。它应该只显示与 Accordion 选项卡对应的图像

标签： javascript reactjs material-ui

【解决方案1】：

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

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

我用material-ui Accordion做了一个简单的例子here

【讨论】：