Javascript 如何在React中临时隐藏表？

当模式出现时，我需要显示不同的背景，因此我需要隐藏表格，直到用户在模式中提交表单。有什么想法吗？我找不到表的任何

show

或

hide

属性

桌子

import React，{Component}来自'React'；
从“反应引导/表格”导入表格；
从“../components/question.js”导入SampleQ；
从“../scss/style.scss”导入css；
从“../components/Layout”导入布局；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showBackground:false
};
this.showBackground=（）=>{
this.setState（{showBackground:true}）；
};
this.hideBackground=（）=>{
this.setState（{showBackground:false}）；
}
}
静态getInitialProps（{query:{类别、问题、答案}}）{
返回{posts:categories，allq:questions，allAs:answers}
}
createTable=（）=>{
设table=[]；
让猫=[]；
for（设i=0；i

您可能想要使用，例如

render（）{
返回(
{isFormSubmitted？：null}
)
}

如果我使用三元运算符进行条件渲染，则在按下表格上的单元格时应弹出的模态将不再显示，因为表格未渲染。我已经用一些上下文代码更新了我的帖子。

import React, { Component } from 'react';
import Table from "react-bootstrap/Table";
import SampleQ from '../components/question.js';
import css from '../scss/style.scss';
import Layout from '../components/layout';

export default class extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showBackground: false
        };

        this.showBackground = () => {
            this.setState({ showBackground: true });
        };

        this.hideBackground = () => {
            this.setState({ showBackground: false });
        }
    }

    static getInitialProps({query: {categories, questions, answers}}) {
        return {postCs: categories, allQs: questions, allAs: answers}
    }

    createTable = () => {
        let table = [];

        let cats = [];

        for (let i = 0; i < this.props.postCs.length; i++){
            cats.push(<th key = {i}>{this.props.postCs[i].title}</th>);
        }

        table.push(<thead> <tr> {cats} </tr> </thead>);

        let index = 0;
        // Outer loop to create parent
        for (let i = 1; i < 6; i++) {
            let children = [];

            //Inner loop to create children
            for (let j = 1; j < 7; j++) {
                children.push(
                    <td>
                        <div>
                            <SampleQ
                                amount={i}
                                question={this.props.allQs[(index)].title}
                                answer={this.props.allAs[(index)].title}
                                showBackdrop={this.showBackground}
                                hideBackdrop={this.hideBackground}
                            />
                        </div>
                    </td>);
                index++;
            }
            //Create the parent and add the children
            table.push(<tr>{children}</tr>)
        }

        return table
    };

    render() {
        return (
            <div>
                <Layout showBackground={this.state.showBackground} title="lllll" />
                <Table striped bordered hover variant = "dark" className={css.table} hide={true}>
                    {this.createTable()}
                </Table>
            </div>
        )
    }
}

render () {
  return (
    <Modal>
      {isFormSubmitted ? <Table /> : null}
    </Modal>
  )
}