使用 ReactJS 和 Skeleton Css 滚动表格

Posted 2023-02-16

【中文标题】使用 ReactJS 和 Skeleton Css 滚动表格

【英文标题】：Scrolling tables using ReactJS and Skeleton Css

【发布时间】：2015-09-08 07:41:02

【问题描述】：

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

我目前有以下 React JS 组件：

HistoryContainer.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>
                        );
                      

HistoryItem.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 中的表格有滚动条。有什么想法吗？

谢谢

【参考方案1】：

搞定了。我不得不把我的代码改成这个

<tbody style='height': '300px', 'overflow':'scroll', 'display': 'block'>

还有

<thead style='display': 'block'>

【参考方案2】：

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

【讨论】：

会将其添加到<tbody>。我没有<thead>

没用。我是否必须拥有 <thead> 才能使其正常工作？

等等，你可能有解决办法。它没有接收我的代码，但是当我用 Chrome 检查器更改它时它起作用了。让我用我的代码尝试一些事情。编译时似乎没有翻译

搞定了。我不得不将我的代码更改为此 <tbody style='height': '300px', 'overflow':'scroll', 'display': 'block'>