反应手风琴与手风琴部分外的相关图像

Question

我找不到任何手风琴的例子，其中活动类与手风琴外的元素相关。我试图得到一个图像改变手风琴的一面，其中每个图像是相关的一个特定的对象。我设法使用绝对定位得到一些工作，但我正在寻找一个更优雅的解决方案，这样我就可以更好地操纵样式。

当图像在信息文本下的手风琴内时，我可以让它工作，但无法找出样式问题。我认为我需要做一些重构或取消数组映射，以使其工作，但我不确定。

这是一个代码盒，或多或少我想实现的，但没有绝对定位的限制- https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js

Answer 1

您可以从您的renderedItems中删除img标签，并做如下操作:

import React, { useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(0);
const onTitleClick = (index) => {
setActiveIndex(index);
};
const renderedItems = items.map((item, index) => {
const active = index === activeIndex ? "active" : "";
return (
<div key={item.title}>
<div className={`title ${active}`} onClick={() => onTitleClick(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`content ${active}`}>
<p>{item.content}</p>
</div>
</div>
);
});
return (
<div className="container-gallery">
<div className="ui styled accordion">{renderedItems}</div>
<img
className={`content `}
src={`${items[activeIndex].image}`}
style={{
height: "200px",
width: "200px"
}}
alt="img"
/>
</div>
);
};
export default Accordion;

至于样式，我不知道你用的是什么所以我用css作为例子:

.container-gallery{
display:flex;
flex-wrap:no-wrap;
justify-content: space-between;
}

here a sandBox link