React - 无法在另一个组件中加载组件

Question

我是React JS脚本的新手，这是我的第一个代码。此代码是父组件

的一部分

constructor(props) {
    super(props);
    this.state = {
        showComponent: false,
    };
    this._onButtonClick = this._onButtonClick.bind(this);
}

_onButtonClick() {
    this.setState({
      showComponent: true,
    });
}

render() {
    return (
        <div>
            <h4>
            <table>
                <tbody>
                <tr>
                    <td><label for='dropdown1'>Dropdown Label: </label></td>
                    <td>
                        <Dropdown id='dropdown1'>
                            <input type='text' placeholder='Default value'></input>
                            <DropdownMenu id='dropdownmenu1'>
                                <DropdownItem id='dropdownitem1'>Item 1</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </td>
                    <td><label for='fromDate'>From: </label></td>
                    <td><input type='date' id='fromDate'></input></td>
                    <td><label for='toDate'>To: </label></td>
                    <td><input type='date' id='toDate'></input></td>
                    <td><input type='dropdown' id='dropdown2'></input></td>
                    <td>
                        <Button id="btn" onClick = {this._onButtonClick}>Fetch Details</Button>
                    </td>
                </tr>
                    <tr width="500px">
                        <td>              
                            {this.state.showComponent ? <TablePage /> : null}
                        </td>
                    </tr>
                </tbody>
                </table>
                </h4>
        </div>
    );
}

TablePage是我预期的子组件，其中包含来自Resize的{​​{1}}，ResizeVertical和ResizeHorizon，但在运行时，它不会显示为部分儿童组成部分。实际上，它与父组件重叠。我不确定这里出了什么问题。

更新：我在下面添加了react-resize-layout代码，并附上了截图。

TablePage

以下是我的截图 -

点击“获取详情”按钮之前

点击“获取详情”按钮后