我的表在两个通信文件

时间:2016-10-05 13:15:57

标签: javascript reactjs

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

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

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

这是我的代码。

文件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

0 个答案:

没有答案