Блог

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

 class Header extends React.Component {
constructor() {
    super();
    this.state = {
        showOptions: false
    };
}
 render() {
let dropDownMenu;
if(this.state.showOptions){
    dropDownMenu = <div className="dropDownMenu">Hello</div>
};
return (
 <header className="fullWidth">

 <div className="search">
    <p className="courses">Courses</p>

        <p>Search</p>
        <input type="text" placeholder="Search"/>
        <img src="https://en.opensuse.org/images/0/0b/Icon-user.png" className="userImage" onClick={this._handleClickA.bind(this)}/>
        {dropDownMenu}
   </div>

  </header>
);
 }
 _handleClickA(){
this.setState({
    showOptions: !this.state.showOptions
});
 }
}

ReactDOM.render( < Header />, document.getElementById('header'));
  

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

Как я могу это сделать?

Вы должны использовать position:absolute для своего выпадающего списка.

Также попробуйте взглянуть на этот компонент, который является потрясающим React-Tether