片段内的React组件未加载

Question

我正在使用react 16.2.0和react-dom 16.2.0。以下是我的代码。

import React, { Fragment } from 'react';

import BodyComponent from './BodyComponent';
import * as HeaderComponents from './HeaderComponent';


class TablePage extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {

        const MyHeader = (props) => {
            const Header = HeaderComponents.TableHeader;
            return <Header status={props.status}/>;
        };



        let pageContent = null;



            pageContent = (
                <ul className="list-table" role="table" aria-label={MessageConstants.ASSIGNMENT_ITEMS_TABLE_CAPTION_MESSAGE}>
                    <MyHeader status={status}/>
                    {
                        items.map((item, i) => {
                            return <TableBody dataSet={item} key={i}/>;
                        })
                    }
                </ul>
            );


        return (pageContent);
    }
}

class TableBody extends React.Component {
    constructor(props) {
        super(props);

    }


    render() {
        const {dataSet} = this.props;


        const BodyHeader = (props) => {
            const Header = HeaderComponents.BodyHeader;
            return <Header index={this.props.index}/>;
        };


        return (
        <Fragment>
         <BodyHeader index={this.props.index}/>
         <BodyComponent itemList={dataSet.content}/>
        </Fragment>
        );
    }
}

export default TablePage;

我的问题是，我在里面返回的组件没有渲染。我也没有在控制台中出现任何错误。

我尝试渲染简单的html代码，例如

<Fragment>
    <p>foo</p>
    <p>bar</p>
</Fragment>

但问题仍然存在。有人可以帮我解决这个问题。