Html 当没有锚定标记时，在react中隐藏div

我有一个

react code

（只是一个片段，它不是一个完整的代码）

，如下所示，它显示了网页上的程序列表<代码>下面代码中的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> 
)

问题陈述：

当

行A

没有呈现任何内容时，我的div（

）在运行时将如下所示：

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

程序

---

我想知道我需要在上面的react代码中做哪些更改，以便在A行不呈现任何内容时，

程序不应显示在网页上。
您可以尝试添加如下类名：

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

您也可以通过函数不返回任何内容来选择根本不渲染它，而不是尝试使用CSS隐藏它


const RenderPrograms=（{programs=[]}）=>{
如果（！programs.length）{
返回[]
}
返回(
程序
{programs.map（（程序，索引）=>
)}
)
}
ReactDOM.render(
,
document.getElementById（'react'）
)
您可以尝试将类放入模板字符串中，并在某个状态值为true时使用三元运算符显示某个类

          <div className={`${stateValue ? "name-of-class-with-hide" : "abc-def"}`}>

它们应该是条件的一部分：

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

返回(
程序长度>0&&
程序
{renderPrograms（）}
)

我将条件更改为检查长度，否则当为空时，您将得到一个
0
而不是零，请尝试更改以下行：

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


程序
{programs&&renderPrograms（）}{/*行A*/}

为此：

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

{程序和&（
程序
{renderPrograms（）}{/*行A*/}
) }

现在，如果没有程序，则不会显示任何内容。
这是一个完整的解决方案。您所需要做的就是将
程序
移动到条件内，并稍微修改条件，如下面的代码段所示

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

您需要将程序的渲染移动到RenderPrograms组件中。使RenderPrograms组件purelu功能化，并通过道具将数据传递给它（而不是使用函数）

您可以使用此
进行操作，因此如果您有程序，则会出现一个
a
元素。如果没有程序，为什么不添加一个类“hide”（这是一个选项）：
programs.length==0
并使用css
hide{display:none}
@MihaiT谢谢您的评论。我想知道你能否用一个例子来解释我。我认为这只能用css来完成，但是
程序
标签在所有情况下都会出现，所以用css是不可能的。@MihaiT我在他们的官方网站上找到了一个解决方案，我可以用它来添加类吗？搜索如何在react中有条件地添加类名。答案和我的评论应该足以让你解决这个非常简单的问题。如果没有程序，也无法呈现div alltoghter。{programs&&（类似于这样的
{programs&&（programs{programs&&renderPrograms（）}{/*行A*/}）}
？类似于这样的？
我将尝试制作一个真正的example@flash这是一个版本，其中
如果
程序
列表为空，则不返回任何内容，它返回一个片段（
），返回一个空字符串也有类似的效果（DOMI中没有呈现任何东西看到您的代码，但我有点困惑如何集成它，因为我不是一个很强的react开发人员。在上面的问题中，如果这一行
{programs&&renderPrograms（）}
不呈现任何内容，则此类
不应显示在网页上或
显示：未应用css。我想知道您是否可以给我一些建议，说明如何将您的代码与我的代码集成。我想知道您是否可以让我知道如何将此代码集成到我上面的当前代码中。在上面的问题中，如果此行
{programs&&renderPrograms（）}
不呈现任何内容，则该类
不应显示在网页上或
显示：未应用css。感谢您的回答。这很有意义。我对我的问题进行了一些编辑。该div上有一个父div，我想隐藏。我想知道该代码将如何工作，然后将条件向上移动一个级别a在做了一些小改动之后，它对我起了作用。
{programs.length>0&（programs{renderPrograms（）}{/*Line A*/}）}
在if
length的情况下
    <div className ="abc-def">  
        {
            programs.length > 0 && (
               <div>
                 <h5>Programs</h5>
                 <RenderPrograms programs = {programs}/>
               </div>
            )
        }
    </div>

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

  return disp || <span />;
};

     // let programs = [
  //   {
  //     url: "test1.com",
  //     name: "test1"
  //   },
  //   {
  //     url: "test2.com",
  //     name: "test2"
  //   }
  // ];

  let programs = [];

  return (
    <div className="App">
      <div class="parent-div">
        <div className="pqr-xyz">
          <h5>Hello World</h5>
        </div>
        <div className="abc-def">
          <h5>Programs</h5>

          <RenderPrograms programs={programs} />
          {/* {programs && renderPrograms()} Line A */}
        </div>
      </div>
    </div>
  );