未显示 reactStrap 选项卡内的 react-data-grid

Question

我正在使用 reactstrap 创建的引导选项卡内添加使用 react-data-grid 组件创建的网格，但该网格在选项卡内未正确显示，只是一条水平线，但是如果我将相同的代码放在选项卡之外，则网格会正确显示

                <TabPane tabId="2">
                <Container>
                    <Row>
                        <Col sm="12" >

                            <CardTitle>Special Title Treatment</CardTitle>
                            <Card body style={{ height: '500px'}}>
                                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                                <Button>Go somewhere</Button>
                                <DropDownClienti />
                                {clienteId}
                                {ultimiGiorni.status === 'loading' && 
                                    <div>Loading...</div>}
                                {ultimiGiorni.status === 'loaded' &&
                                    <DataGrid
                                        columns={columns}
                                        rows={ultimiGiorni.payload.results}
                                        onRowsUpdate={(evt) => {
                                            //@ts-ignore
                                            let toUpdate = { ...ultimiGiorni.payload.results[evt.fromRow], ...evt.updated};
                                            console.log('evt', evt, 'toUpdate', toUpdate );
                                        }}

                                    />
                                }
                                {ultimiGiorni.status === 'error' && (
                                    <div>Error, the backend moved to the dark side.</div>
                                )}


                            </Card>
                        </Col>
                    </Row>
                </Container>
            </TabPane>

如果我以这种方式放置网格不起作用，如果我将它放在 tabContent 之后，我可以正确使用它。 我错过了什么吗？

Answer 1

当您将 react-data-grid 放在 react-strap 选项卡/卡片中时，它应该可以工作

工作示例在这里：

https://codesandbox.io/s/jovial-wind-lws43?file=/src/App.js

试试这样的：

<TabContent activeTab={activeTab}>
        <TabPane tabId="1">
          <Row>
            <Col sm="12">
              <h4>Click on 2nd Tab to see the data grid</h4>
            </Col>
          </Row>
        </TabPane>
        <TabPane tabId="2">
          <Row>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>
                  With supporting text below as a natural lead-in to additional
                  content.
                </CardText>
                <DataGrid
                  columns={columns}
                  rowGetter={i => rows[i]}
                  rowsCount={rows.length}
                  onRowsUpdate={evt => {
                  }}
                />
                <Button>Go somewhere</Button>
              </Card>
            </Col>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>
                  With supporting text below as a natural lead-in to additional
                  content.
                </CardText>
                <Button>Go somewhere</Button>
              </Card>
            </Col>
          </Row>
        </TabPane>
      </TabContent>

只是几个注释：

• 我使用的是版本 6，因为我在使用最新版本 (7+) 的 react-data-grid 时遇到了一些问题。如果相关，请查看 github 问题页面。
• 希望您已经安装了引导程序并导入了所需的库样式。
• 我也使用了rowGetter={i => rows[i]} 而不是rows={rows}。
• 检查您的样式（如果需要，增加网格高度等）

通过代码框并与您的代码相关联，看看它是否有帮助。