javascript - 使用 ReactJS 和 Skeleton Css 滚动表格

Question

我在尝试让滚动表在 React JS 中工作时遇到问题。我也在用骨架。我只提到这一点，以防万一与我不知道的骨架和滚动表有某种冲突。

我目前有以下 React JS 组件:

历史容器.jsx

    import React from 'react'; 

    import HistoryItem from './historyItem';

        export default class HistoryContainer extends React.Component {
             render(){
                 var self=this;
                return (
                  <div>
                      <h6><strong>{'Service History'}</strong></h6>
                      <table>
                      <tbody styles={'height: 100px; overflow: scroll;'}>
                      {

                        self.props.historyItems.map(function(historyItem) 
                        {
                          return ( 
                                  <HistoryItem  historyItem={historyItem}/>
                                )                              
                        })

                      }
                      </tbody>
                      </table>
                  </div>
                        );
                     } }

历史元素.jsx:

import React from 'react';

export default class HistoryItem extends React.Component{

  convertDate(data)
  {
     var d= new Date(data);
     return (d.getMonth()+1)+'\\'+d.getDate()+"\\"+ d.getFullYear();
  }
  render(){

       if(this.props.historyItem.WorkPerformedSummary==='')
       {
        return null;
       }

       return( 
          <div className='row'>
                <tr>
                      <td><strong>{this.props.historyItem.WorkPerformedSummary}</strong></td>


                      { this.props.historyItem.CompletedDate ? <td>
                                  {this.convertDate(this.props.historyItem.CompletedDate)}
                                  </td>: <td> {'n/a'} </td>  }

                </tr>
          </div>
          );
  }
}

所以，我的问题是，即使使用 <tbody> 中的样式，我也无法让 HistoryContainer.jsx 中的表格具有滚动条。 .有什么想法吗？

谢谢

Answer 1

您需要将 tbody 转换为 block 级元素，以便它们可以滚动。尝试将 display: block; 添加到 tbody 和 thead。