1

我在尝试让滚动表在 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>
          );
  }
}

所以,我的问题是,我无法让 HistoryContainer.jsx 中的表格有滚动条,即使在<tbody>. 有任何想法吗?

谢谢

4

2 回答 2

4

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

于 2015-06-22T18:24:13.710 回答
0

得到它的工作。我不得不将我的代码更改为此

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

并且

<thead style={{'display': 'block'}}>
于 2021-03-24T09:22:14.817 回答