我的表在两个通信文件

Question

我有两个文件构成一个表，一个文件是表头，一个是表体。表体未正确显示。表头很好，但我正在尝试将第二个文件中的代码导入表头。它出现但它没有出现在表格格式中，它只显示为单个字符串。

注意： 这两个组件文件也是一个单独的容器文件的子文件，但我不认为问题源于此，所以我把它遗漏了。

第二个注意事项： 另外，作为一个没有太多经验的实习生，如果这是简单的无知，我道歉。我尝试使用谷歌搜索等，但找不到与我的特定问题相似的任何内容。

这是我的代码。

文件1（表格标题）：

import React, { Component } from 'react';
import Body from '../../components/prior-auth/Body';

class OrderHistory extends Component {

  render() {

return (
  <div>

    <h1>Order History</h1>

    <div>
      <table className="table table-hover table-responsive">
        <thead>
          <tr>
            <th>#</th>
            <th>Service</th>
            <th>Provider</th>
            <th>Client Preference</th>
            <th>Max Units</th>
            <th>Max Cost</th>
            <th>Brokered Date</th>
            <th>Begin Date</th>
            <th>End Date</th>
            <th>Reason</th>
          </tr>
        </thead>
      <Body/>
      </table>
    </div>
  </div>
  )
 }
}

export default OrderHistory;

文件2（表体）：

import React, { Component } from 'react';

class Body extends Component {

    render () {
    return(
      <table class="table table-hover table-responsive">
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            <td>f</td>
            <td>g</td>
            <td>h</td>
            <td>i</td>
          </tr>
        </tbody>
       </table>
  )
 }
}


 export default Body;

我不知道如何显示整个输出，所以这是错误的部分：

描述该行的“1”，以及字母是进入每列的数据的示例占位符。

  

1abcdefghi