Нажатие на изображение "подталкивает" остальную часть списка под изображением

#javascript #reactjs #flexbox

#javascript #reactjs ( реакция ) #flexbox #reactjs

Вопрос:

Я пытаюсь создать простой компонент списка, который отображает изображения при нажатии на заголовок. Для каждого заголовка вы можете открыть соответствующее изображение (ы), все это работает нормально, но проблема в том, что остальные заголовки (список) помещаются под изображение (ы).

Желаемым результатом должно быть то, что изображения отображаются справа от списка, не влияя на сам список.

Я попытался разделить компонент на два компонента, поэтому, когда изображение вызывается в тернарном операторе, вводится компонент типа <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 amp;amp; this.state.activeProject.id === project.id ? 'P_Color' : null}
                 onClick={() => {this.showProjectOnClick(project)}}><b>Project name: </b>{project.title}</p>
                {
                this.state.isToggleOn amp;amp; this.state.activeProject.id === project.id 
                ? 
              <div className="ProjectImageBox">
                <img className="ProjectImage" src={project.src} alt={project.altText}/> 
              </div>
                : ''
                }
            </div>)
            })}
         </div>
    )
  }
}

Список проектов

Текущий результат при нажатии на заголовок

Желаемый результат

1. Каково желаемое поведение?

2. Я отредактировал свой вопрос, чтобы сделать это более понятным.

3. Вы визуализируете массив элементов, каждый из которых представляет собой отдельный imagebox. Вы могли бы использовать css, чтобы сделать положение поля абсолютным и отобразить это. Я бы предложил создать другой компонент и сохранить selecteditem в вашем состоянии и передать это вашему компоненту изображения, отображая правильное изображение.

Ответ №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";
}