单击图像“推送”图像下方列表的其余部分答案

【问题标题】：Clicking on image 'pushes' the rest of the list underneath image单击图像“推送”图像下方列表的其余部分
【发布时间】：2019-04-01 22:29:17
【问题描述】：

我正在尝试构建一个简单的列表组件，在单击标题时显示图像。对于每个标题，您可以打开相应的图像，这一切正常，但问题是其余标题（列表）被推到图像下方。

想要的结果应该是图片显示在列表的右侧而不影响列表。

我尝试将组件分成两个组件，因此在三元运算符中调用图像的位置放置一个像 <ProjectImage src={project.src} alt={project.altText}/> 这样的组件，但这似乎并不能解决问题。

import {items} from '../ProjectInfo/projectObjects'


export class Sidenav extends Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: false, items: items};
    this.showProjectOnClick = this.showProjectOnClick.bind(this);
  }

showProjectOnClick(event){
const checkActive = this.state.items.id === items.id
const activeProject = {...event, active: !checkActive}
  this.setState(state => ({
    isToggleOn: !state.isToggleOn,
    activeProject
  }));
}

  render() {
    const {items} = this.state
    return (
          <div className="sidenav">
         {items.map((project) => {
           return ( <div className="Box" key={project.id}>
              <p className={this.state.isToggleOn && this.state.activeProject.id === project.id ? 'P_Color' : null}
                 onClick={() => {this.showProjectOnClick(project)}}><b>Project name: </b>{project.title}</p>
                {
                this.state.isToggleOn && this.state.activeProject.id === project.id 
                ? 
              <div className="ProjectImageBox">
                <img className="ProjectImage" src={project.src} alt={project.altText}/> 
              </div>
                : ''
                }
            </div>)
            })}
         </div>
    )
  }
}

项目列表 点击标题时的当前结果 想要的结果

【问题讨论】：

期望的行为是什么？
我已经编辑了我的问题以使其更清楚。
您正在渲染一组项目，每个项目都有一个单独的图像框。您可以使用 css 使框的位置成为绝对位置并渲染它。我的建议是创建一个不同的组件并将所选项目保持在您的状态并将其传递给您的图像组件，从而呈现正确的图像。

标签： javascript reactjs flexbox

【解决方案1】：

你可以用 css 来做。

.image{
  position: absolute;
  top: 0;
  right: 40px;
}

但更好的选择是使用不同的组件并将所选项目传递给该组件。这减少了组件的数量，您只需相应地定位它们。我创建了一个简单的stackblitz 来展示它是如何工作的。

【讨论】：

【解决方案2】：

为此，您必须对图像进行绝对定位，以免占用列表中的空间。

css 类应该如下：

.image {
  position: "absolute";
  top: 0;
  left: "100%";
  /* the propreties below you can customize */
  width: "50px";
  height: "auto";
}

【讨论】：