如何在同一页面上单击链接显示表格？

Question

我有主要成分DisplayLinks.js。在此组件中，单击链接时，我想在同一页面中显示一个表。我的第二个组件是StudentListTable，在其中添加带有道具的桌子。它没有显示，为什么？

我在这里添加了示例代码：

state = {
        visible: false,
        showTable:false
    }

    showCourseModal = () => {
        this.setState({
            visible: true,
        });
    }


    showStudentList = () => {
        this.setState({
            showtable: true,
        })

    }


    render() {
        return (
            <div align="center">
            <a href="#" onClick={this.showCourseModal}>Course</a>
            <a href="#" onClick={this.showStudentList}>StudentList</a>
                <CourseModal
                    visible={this.state.visible}
                    onOk={this.onOk}
                    onCancel={this.onCancel} />
                    <StudentListtable showtable={this.state.showTable} data={data}/>

            </div>
        )
    }

第二部分：

 state = {
    showTable: this.props.showTable,
}
                render() {

                    return (
                        <div>
                            <div align="right">
                                <Button
                                    type="primary">Update</Button>
                            </div>
                            <Table
                                dataSource={this.props.data}
                                showTable={this.props.showTable}
                                columns={columns}
                                pagination={{ pageSize: 5 }}

                            />
                        </div>
                    )
                }

Answer 1

您可以通过以下方式处理渲染中的内部组件来处理它：

render() {
  return (
    <div align="center">
    <a href="#" onClick={this.showCourseModal}>Course</a>
    <a href="#" onClick={this.showStudentList}>StudentList</a>
      <CourseModal
        visible={this.state.visible}
        onOk={this.onOk}
        onCancel={this.onCancel} />
        {
          this.state.showTable?
            <StudentListtable data={data}/>
          :
            <p>No tables to show</p>
        }
    </div>
  )
}