切換時在DIV外部放置內容會發生反應

Question

我在React中創建切換，並且在按下按鈕時它正在工作。我想要做的是將課程體在className="showcourses-field"之外，因爲我想讓課程顯示在按鈕下方。當我把{coursebody}放在div裏面的時候，但是當我把它放在div的外面時它不起作用。我怎麼能把它放在div之外？

JS

class ShowCourses extends React.Component { 
    constructor(){ 
super(); 
this.state= { 
    showingcourses: false 

} 
} 

render(){ 
    let courseBody; 
    let buttonText ="Show More Courses"; 
    if (!this.state.showingcourses) { 
     courseBody = this.props.body; 

    } else { 
     courseBody = <Course coursename="Food" status="Progress" progress="43%" /> 
     buttonText = "Hide courses"; 

    } 


    return(
    <div className="showcourses-field"> 
    <button className="showbutton" onClick={this._toggleCourse.bind(this)}>{buttonText}</button> 

    {courseBody} 
    </div> 




    ); 


} 
    _toggleCourse(event){ 
     event.preventDefault(); 
     this.setState({ 
      showingcourses: !this.state.showingcourses 
     }); 
    } 
} 

Answer 1

的className = 「showcourses場」 分區之外？你知道你必須只有一個元素作爲回報，所以只需創建另一個Div：

<div> 
    <div className="showcourses-field"> 
    <button className="showbutton" onClick={this._toggleCourse.bind(this)}>{buttonText}</button>  
    </div> 
    {courseBody} 
</div>