折叠表更改布局答案

【问题标题】：Collapse Table changing layout折叠表更改布局
【发布时间】：2019-10-06 19:44:09
【问题描述】：

我正在使用 Material-UI 构建一个在添加超过 3 行后折叠的表格，但是在打开折叠的表格时它会更改其布局。

[在此处输入图片描述][1]

创建行

    createRowFrame=(array,num)=>{
            return array.map(frameObject=>{
                return(
                    <MuiThemeProvider theme={theme}>
                        <TableRow key={frameObject.frame.id} style={num===2?{backgroundColor:"#F1D3D3"}:{}}>
                            <TableCell>1</TableCell>
                            <TableCell>{frameObject.frame.name}{frameObject.hipsterFrame !== null && (" / "+frameObject.hipsterFrame.name)}</TableCell>
                            <TableCell><DeleteIcon className={this.props.classes.icon} onClick={()=>{this.props.removeOneFrame(frameObject.frame.id)}}/></TableCell>
                        </TableRow>
                    </MuiThemeProvider>
                )
            })
        }

创建折叠表（有条件地）

        createTablePart=(frameArray, brand)=>{
            var remainingCredit = this.props.credits[brand+"Credit"] - frameArray.length
            var allowedFrames
            var overFrames
            if(remainingCredit<0){
                allowedFrames = frameArray.slice(0,this.props.credits[brand+"Credit"])
                overFrames = frameArray.slice(this.props.credits[brand+"Credit"], frameArray.length)
            } else {
                allowedFrames=frameArray
                overFrames=[]
            }
            console.log(allowedFrames)
            console.log(overFrames)
            if(frameArray.length>3){
                const {classes, t} = this.props;
                return(
                    <React.Fragment>
                        <MuiThemeProvider theme={theme}>
                            <TableRow onClick={()=>this.handleClickOpen(brand+"Open",this.state[brand+"Open"])}>
                                <TableCell>{frameArray.length}</TableCell>
                                <TableCell>{brand.toUpperCase()}</TableCell>
                                <TableCell>{this.state[brand+"Open"] ? <ExpandLess /> : <ExpandMore />}</TableCell>
                            </TableRow>
                            <Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
                                <div className={classes.collapsedTable}>
                                    {this.createRowFrame(allowedFrames,1)}
                                    {this.createRowFrame(overFrames,2)}
                                </div>
                            </Collapse>
                        </MuiThemeProvider>
                    </React.Fragment>
                )
            } else {
                return (
                <React.Fragment>
                    {this.createRowFrame(allowedFrames,1)}
                    {this.createRowFrame(overFrames,2)}
                </React.Fragment>
                )
            }
        }

我预计表格会倒塌，但仍然服从列。

【问题讨论】：

嗨，我想澄清一下，“它改变了布局”具体是什么意思？
@ZekeHernandez 我认为的意思是：中的单元格与外面的表格列不对齐

标签： reactjs material-ui

【解决方案1】：

我认为您可以完全避免使用Collapse，而只是有条件地以编程方式显示您的新行。例如，您将替换这部分代码：

<Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
                                <div className={classes.collapsedTable}>
                                    {this.createRowFrame(allowedFrames,1)}
                                    {this.createRowFrame(overFrames,2)}
                                </div>
                            </Collapse>

与：

this.state[brand+"Open"] && <>{Here put your new created row without the div }</>

语法可能不正确，但我认为这可能会有所帮助。

【讨论】：