0

我正在尝试将反应 ag-grid 放入流星中,并且我遇到了似乎是 css 的障碍,但这很奇怪,我不确定并且无法通过它。

如果我不包含 ag-grid 和 ag-theme-fresh css 文件,我的数据就会进来并出现——当然,所有这些都是非常无格式的——就像这样: 带有数据的未格式化的农业网格

但是如果我包含这两个 css 文件,我会得到一个看起来像空白屏幕的东西,除了一切都在那里,以网格形式,好像一切都很好,但它都是不可见的。像这样: 格式化的 ag-grid 全部不可见

这是我的代码——有人可以帮我理解这里发生了什么吗?

class AdminThings extends Component {

constructor(props) {
    super(props);
  }

  onGridReady( params ){

  }

  renderGrid(things) {
    return (
    <div className="ag-theme-fresh"> 
    <AgGridReact 
      id="myGrid"
      rowData={things}
      onGridReady={this.onGridReady.bind(this)}
    >
      {Things.schema._schemaKeys.map((row, index) => {
        return ( <AgGridColumn key={row} field={row}></AgGridColumn> );
      })}
    </AgGridReact>
    </div>
    );
  }  

  render() {
    return( !this.props.loading ? this.renderGrid(this.props.things) : <div></div>);
  }
};

AdminThings.propTypes = {
  loading: PropTypes.bool.isRequired,
  things: PropTypes.array
};

export default AdminThings = withTracker(({ match }) => {
  const subHandle = Meteor.subscribe( 'things' );
  const loading = !subHandle.ready();
  let things;
  if ( !loading ) {
    things = Things.find().fetch();
  }
  return {
    loading,
    things: things,
  };
})(AdminThings);

我不熟悉完全隐形,除非某些东西的不透明度为 0,而这里不是这种情况。谢谢!

4

1 回答 1

1

从 ag-grid 的一个例子中弄清楚了。通过显式定义包含 AgGridReact 组件的 div 的高度和宽度,一切都奇迹般地出现了。因此,通过更改上面示例中的一行:

<div className="ag-theme-fresh"> 

对此:

<div style={{height: 400, width: 900, marginTop: 15}} className="ag-theme-fresh">

我得到了想要的结果: 农业网格固定

于 2018-02-20T15:32:44.837 回答