从标题创建下拉列表而不使用 React 调整标题大小答案

【问题标题】：Create a drop down from header without resizing header with React从标题创建下拉列表而不使用 React 调整标题大小
【发布时间】：2016-10-11 00:06:53
【问题描述】：

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

我考虑过在另一个组件中制作下拉菜单并将其传递给标题组件，但我无法让它工作，所以我试图这样做。当我切换它时，整个标题会改变大小，我只希望它从标题中创建一个带有潜在其他颜色的下拉列表。

我该怎么做？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

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

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

【讨论】：