我在尝试让滚动表在 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>
. 有任何想法吗?
谢谢