javascript - 切换时将内容置于 DIV 之外进行 react

Question

我正在 React 中创建一个切换，当我按下按钮时它正在工作。我想要做的是将 courseBody 放置在带有 className="showcourses-field" 的 div 之外，因为我希望类(class)显示在按钮下。当我将 {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-field"Div 之外？你知道你必须只有一个元素作为返回，所以只需创建另一个 Div :

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