reactJS在呈现中隐藏一个<div>会留下很多空白。

Question

我有一个reactJS应用程序，它由一个映射函数呈现。这是一些输出的样子：

​

我正在为3个受益人生成数据，我给用户删除每个受益人的选项。数据是从数据库中提取的。一旦用户删除了他/她想要删除的任何受益人，数据将被写回数据库。

当用户单击“删除此受益人”按钮时，将调用onclick函数。该函数将设置与特定受益人关联的标志(beneDeleteFlag)。该数据是用setstate()写入状态的，因此reactJS将重新呈现。当呈现发生时，我将每个部分的类名设置为hide_div或show_div (它们是.css文件中的类，将可见性设置为隐藏或可见)。这是执行以呈现每个受益人的代码：

    return idArray.map( item => (
        <div>
            <div className={item.visibility}>
                <div className="beneficiary_background">
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>Name:</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisName} value={item.beneName} maxLength="33"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>SSN:</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisMid} value={item.beneMid} maxLength="9"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>Address&nbsp;1:</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisAddr1} value={item.beneAddr1} maxLength="20"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>Address&nbsp;2:</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisAddr2} value={item.beneAddr2} maxLength="20"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>Address&nbsp;3:</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisAddr3} value={item.beneAddr3} maxLength="20"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>City</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisCity} value={item.beneCity} maxLength="20"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>State</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisState} value={item.beneState} maxLength="2"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label>Zip Code</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisZip} value={item.beneZip} maxLength="5"/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label id="lblName">Spouse</label>
                        </div>
                        {this.renderSpouse(item.thisSpouse, item.beneSpouse)} 
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label id="lblName">Primary</label>
                        </div>
                        {this.renderPrimary(item.thisPorS, item.benePorS)} 
                    </div>
                    <div className="row">
                        <div className="col-3 text-left text_14">
                            <label id="lblName">Percent</label>
                        </div>
                        <div className="col-9 text-left text_14">
                            <input type="text" id={item.thisPct} value={item.benePct} maxLength="3"/>
                        </div>
                    </div>   
                    <div className="spacer">
                    </div>               
                    <div className="row">  
                        {this.renderDeleteButton(item.thisDelete)}   
                    </div>
                    <div className="spacer">
                    </div>
                </div>
            </div>
            <div className="spacer">
            </div>
        </div>
    ))

在呈现的顶部，有一行代码可以读取

<div className={item.visibility}>

{item.visibility}将包含用户选择删除的任何受益人的hide_div。

我的问题是，当单击“删除受益人”按钮(我单击了第二个受益人的按钮)，并且使用hide_div填充{hide_div}时，呈现的内容如下：

​

正如您可以看到的，呈现发生了，但它只是隐藏了。我想通过引导，下一个会浮起来，不会在两者之间留下任何可见的空白。

有什么建议吗？

Answer 1

尝试在map上使用map，这样您就可以有选择地呈现您的项目，而不是隐藏您不想看到的项目。

与…有关的东西：

return idArray.reduce( (all, item, idx) => {
    if (item.visibility !== 'hide_div') {
        all.push(
            <div key={idx}>
                <div className="beneficiary_background">
                    ...
                </div>
            </div>
        )
    }
    return all
}, [])

您不再需要为隐藏项设置className

Answer 2

如果您使用的是visibility: hidden，它确实会留下空间。可见性隐藏留下的空间，应该被隐藏的内容，如果它是可见的。如果您根本不想留下任何空间，请使用display: none。它的作用方式是相同的，但没有为元素留出空间。

Answer 3

您可以使用javascript中的filter函数过滤标记为已删除的数据：

​

const array = [{beneDeleteFlag: true, data: 'data 1'}, {beneDeleteFlag: false, data: 'data 2'}, {beneDeleteFlag: false, data: 'data 3'}, {beneDeleteFlag: true, data: 'data 4'}]

const newArray = array.filter((item) => item.beneDeleteFlag !== true)

console.log(newArray)

​

而你仍然在你的UI中有空空间的原因，是因为你在你的CSS中使用visibility: 'hidden'，你应该使用display: 'none'。