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

【问题标题】：React accordion with correlating image outside accordion section与手风琴部分外的相关图像反应手风琴
【发布时间】：2021-02-06 00:08:38
【问题描述】：

我找不到任何活动类与手风琴外部元素相关的手风琴示例。我正在尝试在手风琴侧面更改图像，其中每个图像都与特定对象相关。我设法使用绝对定位使某些东西起作用，但我正在寻找一种更优雅的解决方案，以便更好地操纵样式。

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

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

【问题讨论】：

标签： reactjs positioning

【解决方案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;
}

这里是一个沙盒link

【讨论】：