在父組件中創建並返回一個新組件

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> 
     ) 
    } 
}