删除由反应同位素创建的行之间的水平间距

问题描述

我正在使用反应同位素过滤我使用CSS创建的表/网格中的行（供应商）。即使我将间距设置为0，表/网格中的行之间的间距也大致等于每行的高度。这是一些代码：

export default class SupplierContainer extends React.Component {
    this.state = {
        suppliers: null,iso: null,isoLength: null
    }

    componentDidMount() {
        // irrelevant code ... this.setState({ suppliers })
        var element = document.querySelector('.supplier-data');
        this.setState({
            iso: new Isotope(element,{
                itemSelector: '.supplier-row',layoutMode: 'vertical','overflow-y': 'visible',}),})
    })

    filterResults = (input_filter) => {
        var iso = this.state.iso;
        iso.arrange({
            filter: ((element) => {
                var supplier_name = element.querySelector('.supplier-name');
                if (supplier_name.innerHTML.toLowerCase().includes(input_filter)) {
                    return element;
                }
            })
        });
        this.setState({ isoLength: iso.filteredItems.length });
    }
    render() {
        return 
                <SupplierTableViewIsotope
                    // where suppliertableconfig came from is not important
                    supplierTableConfig={ this.supplierTableConfig }
                    supplierTableData={ this.state.suppliers }
                    filterResults = {this.filterResults}
                    input_filter={this.state.input_filter}
                    isoLength={this.state.isoLength}
                />
    }
}

SupplierTableViewIsotope文件和类如下：

export default class SupplierTableView extends React.Component {
    render() {
        <div className="row">
                <div className="col">
                    <div className="content-block">
                        // The following input filter is rendering correctly
                        <div className="row">
                            <div className="col-12">
                                <h3>Filter</h3>
                            </div>
                            <div className="col">
                                    <div className="">
                                        <label >{ this.props.label || 'Name' }</label>
                                        <input 
                                            type="text" 
                                            className="form-control" 
                                            id={ 'suppliers_input' }  
                                            value={ this.props.input_filter ||  ''}
                                            placeholder={ this.props.placeholder || 'Enter value...' }
                                            onChange={(e) => this.props.onInputFilter(e.target.value)} 
                                        />
                                    </div>
                            </div>
                        </div>
                        <div className="row shuffle-row">
                                    // The header works,ignore the this.headings,there are 5 columns created per row in the heading and the rows that follow in the body
                                    <div className="supplier-header">
                                            {this.headings.map((h,k) => (
                                                <strong className={`align-middle supplier-th-${k + 1}`} key={k}>{h}</strong>
                                            ))}
                                    </div>
                                    <div className="supplier-data">
                                            // This creates many rows with 5 columns,each row has is spaced apart by 
                                            {this.props.supplierTableData.map((dataItem,data_k) => (
                                                <div key={data_k} className={dataItem.deleted_at ? 'deleted-supplier supplier-row' : 'supplier-row'} >
                                                    {this.props.supplierTableConfig.map((configItem,conf_k) => (
                                                        <div key={` ${conf_k}-${data_k} `} className={configItem.attribute == 'name' ? `align-middle supplier-name supplier-td-${conf_k + 1}` : `align-middle supplier-td-${conf_k + 1}`}>
                                                            // The values are irrelevant 
                                                            {this.getValue(dataItem,configItem)}
                                                        </div>
                                                    ))}
                                                </div>
                                            ))}
                                    </div>
                                    <div className="supplier-count">
                                        // This footer works
                                        <div>{`Count - ${this.props.isoLength}`}</div>
                                    </div>
                         </div>
                    </div>
                </div>
        </div>
    }
}

由于行之间的间距，刚创建的表溢出行，列和内容块。带有计数的页脚正确显示在内容块的底部，但是表行溢出到该内容块的底部。 css如下：

.row {
    margin-bottom: 30px;
}
.content-block {
    background-color: $white;
    border-radius: 8px;
    box-shadow: 0px 4px 10px 0px $shadow-colour;
    padding: 2em 1em;
}
.shuffle-row {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}
.supplier-header {
    display: grid;
    grid-template-columns: 5% 25% 5% 15% 50%;
    width: 100%;
    height: fit-content;
    font-size: 1.1em;
    color: white;
    background-color: black;
}
.supplier-data {
    width: 100%;
    max-height: 100%;
    margin-top: 1em;
    padding: 0;
    border: 0;
    overflow-y: visible !important;
}
.supplier-row {
    display: grid;
    grid-template-columns: 5% 25% 5% 15% 50%;
    grid-template-rows: 100%;
    position: relative !important;
    width: 100%;
    height: fit-content;
    padding: 0;
    border: 0;
}
// The following supplier table data's and header's have their own classes which are identical so I am changing the format here to save space
.supplier-td-1,2,3,4,5 {
    line-height: 2.5em;
    height: 2.5em;
    text-align: center;
}
.supplier-th-1,5 {
    text-align: center;
}

反应同位素似乎是一个新话题，我无法在线找到答案。我已经将同位素布局更改为很多不同的东西，但这在每个人上都会发生，或者更糟的事情会发生。如果我使用水平砌体并将装订线设置为0，则元素之间的间距会消失，但是这完全弄乱了页面上的布局，我无法解决。这应该是更容易的修复。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）