大佬教程收集整理的这篇文章主要介绍了与手风琴部分外的相关图像反应手风琴，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我找不到任何手风琴示例，其中活动类与手风琴外部的元素相关。我正在尝试在手风琴一侧更改图像，其中每个图像都与特定对象相关。我设法使用绝对定位让一些东西工作，但我正在寻找更优雅的解决方案，以便我可以更好地操纵样式。
当图像位于信息文本下的手风琴内时，我可以让它工作，但无法弄清楚样式问题。我想我需要进行一些重构或取消数组映射才能使其正常工作，但我不确定。
这是我想要实现的或多或少的代码沙盒，但没有绝对定位的限制 - https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js
您可以从 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;
}
这里是一个沙盒 link
以上是大佬教程为你收集整理的与手风琴部分外的相关图像反应手风琴全部内容，希望文章能够帮你解决与手风琴部分外的相关图像反应手风琴所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。