Question

我正在React中创建一个切换，当我按下按钮时它正在工作。我想要做的是将courseBody放在div之外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 =＆＃34; showcourses-field＆＃34; DIV？你知道你必须只有一个元素作为回报，所以只需创建另一个Div：

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

在切换时将内容放在DIV外部作出反应

1 个答案: