在父组件中创建并返回一个新组件

Question

我有两个组件Class和Students。 Class组件呈现并返回<li>中的类的列表。我想添加单击事件以显示Class组件中的每个类的学生。

我已经中类组件的渲染方法如下：

render(){ 
     const renderClasses =() => 
      this.props.classes.map(class => { 
       return (
        <li> 
         <a href="#">{class.name}</a> 
        //class object also has a property of 'students' 
        </li> 
       ) 
     }) 

     return(
      <div> 
       { renderClasses() } 
      </div> 
     ) 
    } 

我希望能够点击的锚标记，并显示相应的学生该课。提前

<Students students={this.class.students} />

感谢：当然，学生部分应该如下得到一个道具！

Answer 1

你可以保持一个组成部分state保存classindex应该表现出的学生，然后在锚添加onClick处理程序，以改变这种状况index。

尝试下面的代码：

export default class Test extends Component { 
    constructor(props) 
    { 
     super(props); 
     this.state = {activeClassIndex : -1} 
     this.setActiveClassIndex = this.setActiveClassIndex.bind(this); 
    } 

    setActiveClassIndex(index){ 
     this.setState({ 
      activeClassIndex : index 
     }) 
    } 


    render(){ 
     const renderClasses =() => 
      this.props.classes.map((currentClass , index) => { 
      return (
       <li> 
        <a href="#" onClick={() => { this.setActiveClassIndex(index) } }>{currentClass.name}</a> 
        {this.state.activeClassIndex == index ? <Students students={currentClass.students} /> : "" } 
       </li> 
      ) 
     }) 

     return(
      <div> 
       { renderClasses() } 
      </div> 
     ) 
    } 
}