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。

我的问题是，当单击删除受益人按钮时（我单击了第二个受益人的按钮），并且{item.visibility}填充了hide_div，这就是呈现的内容：

如您所见，渲染发生了，但只隐藏了。我虽然使用了引导程序，但下一个将浮动并且不会在两个可见的空白之间留下任何空格。

有什么建议吗？

Answer 1

尝试在reduce上使用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中的过滤器功能过滤已标记为已删除的数据：

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'。

reactJS在渲染器中隐藏<div>会留下很多空白

3 个答案: