你如何在 React 中临时隐藏一个表？

Question

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

表格

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

Answer 1

您可能想使用conditional rendering，例如

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