在没有锚标记的情况下，隐藏div。

Question

我有一个react code (just a snippet, its not a complete code)，如下所示，它显示了网页上的程序列表。下面反应代码中的Line A呈现网页上的所有程序列表。

反应代码

const renderPrograms = () => {
    return programs.map((program, index)=>{
        return (
            <a href={program.url} key={index}>
                <div className="program" >
                    <div class="hello-world">{program.name}</div>
                </div >
            </a>
        )
    })
}


return(
<div class="parent-div">
    <div className ="pqr-xyz">  
        <h5>Hello World</h5>            
    </div>
    <div className ="abc-def">  
        <h5>Programs</h5>
        {programs && renderPrograms()}   {/*Line A*/}
    </div>
</div> 
)

上面的react代码在运行时呈现以下html代码：

<div class="parent-div">
    <div className ="pqr-xyz">  
        <h5>Hello World</h5>            
    </div>
    <div class="abc-def">
       <h5>Programs</h5>
       <a href="https://www.google.com/">
            <div class="program">  
              <div class="hello-world">TYUV</div>
            </div>
       </a>
       <a href="https://www.twitter.com/">
            <div class="program"> 
              <div class="hello-world">SGHS</div>
            </div>  
       </a>
    </div>
</div>

问题陈述：

当Line A不呈现任何内容时，我的div (<div className ="abc-def">)在运行时将如下所示：

<div class="abc-def">   
  <h5>Programs</h5>
</div>

我想知道我需要在上面的反应代码中做什么修改，这样当A行不呈现任何内容时，<div class="abc-def"><h5>Programs</h5></div>就不应该在网页上显示。

Answer 1

它们应成为条件的一部分：

return(
    programs.length > 0 && <div className ="abc-def">  
        <h5>Programs</h5>
        {renderPrograms()} 
    </div>
)

我更改了条件以检查长度，否则在空时将得到一个0而不是零

Answer 2

试着改变这一行：

    <div className ="abc-def">  
        <h5>Programs</h5>
        {programs && renderPrograms()}   {/*Line A*/}
    </div>

这方面：

    { programs && ( 
        <div className ="abc-def">  
            <h5>Programs</h5>
            {renderPrograms()}   {/*Line A*/}
        </div>
    ) }

现在，如果没有程序，就不会显示任何内容。

Answer 3

您可以尝试添加这样的className：

<div className={`abc-def ${programs.length ? "hidden" : ""}`}

也可以从父组件中选择不使用<div>呈现此组件。