#javascript #css #reactjs
#javascript #css #reactjs
Вопрос:
Я создаю заголовок, в котором для каждого пользователя будет изображение. Когда я нажимаю на изображение, должно появиться выпадающее меню с такими опциями, как выход из системы и настройки (аналогично выпадающему списку пользователей на 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'));
Я рассматривал возможность создания выпадающего списка в другом компоненте и передачи его компоненту заголовка, но я не мог заставить его работать, поэтому я пытался сделать это таким образом. Когда я переключаю его, весь заголовок изменяет размер, и я только хочу, чтобы он создавал выпадающий список с потенциальным другим цветом из заголовка.
Как я могу это сделать?
Ответ №1:
Вы должны использовать position:absolute
для своего выпадающего списка.
Также попробуйте взглянуть на этот компонент, который является потрясающим React-Tether