javascript - 在不使用 React 调整标题大小的情况下从标题创建下拉列表

Question

我正在创建一个标题，其中每个用户都有一个图像。当我按下图像时，应该有一个下拉菜单，其中包含注销和设置等选项(类似于 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'));

我考虑过在另一个组件中制作下拉列表并将其传递给 header 组件，但我无法让它工作，所以我试图以这种方式进行。当我切换它时，整个标题都会改变大小，我只希望它创建一个下拉菜单，其中可能包含标题中的其他颜色。

我该怎么做？

Answer 1

您必须为下拉菜单使用 position:absolute。

也试着看看这个很棒的组件 React-Tether