Question

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

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

我已经尝试将组件分为两个组件，因此在三元运算符中调用图像时，将一个像<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>
    )
  }
}

项目列表 点击标题时的当前结果 所需的结果

Answer 1

要做到这一点，您必须将图片绝对定位，以免占用列表中的空间。

css类应为以下内容：

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

Answer 2

您可以使用CSS做到这一点。

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

但是更好的选择是使用其他组件，并将选定的项目传递给该组件。这样可以减少组件的数量，您只需要相应地放置它们即可。我创建了一个简单的stackblitz，以说明其工作原理。

点击图片“推送”图片下方的列表的其余部分

2 个答案: