javascript - 在父组件中单击创建并返回一个新组件

Question

我有两个组件 Class和Students 。 Class组件渲染并返回 <li> 中的类列表。我想添加点击事件来显示 Class 中每个类(class)的学生组件。

我在 Class 组件的 render 方法中有以下内容:

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

我希望能够单击 anchor 标记并显示该类(class)的相应学生。当然，Student 组件应该接收一个 prop，如下所示:

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

提前致谢!

Answer 1

您可以保留组件state保存class index应该向其学生显示，然后添加 onClick anchor 上的处理程序以更改 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>
        )
    }
}