使用React創建從頭部的下拉列表，而不用調整頭部大小

我正在創建一個頭部，其中將爲每個用戶提供一個圖像。當我按下圖像時，應該有一個下拉菜單，其中包含註銷和設置等選項（類似於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'));

我也考慮過讓下拉列表中的另一個組件，並把它傳遞給頭組件，但我無法得到它的工作，所以我試圖做這種方式。當我切換它時，整個標題會更改大小，我只希望它可以從標題中創建具有潛在其他顏色的下拉列表。

我該怎麼做？

來源

2016-10-10 Naomi

您必須使用position:absolute作爲下拉菜單。

還試圖看看這個組件是真棒React-Tether

來源

2016-10-10 16:06:53

使用React創建從頭部的下拉列表，而不用調整頭部大小

回答

相關問題