Reactjs NextJS-组件条件呈现出现重复html ID的问题'；s

我在当前项目中使用NextJS。其中一个组件支持组件渲染单行：

const SingleRow = ({ id, label, children }) => {

 return (
  <p id={id}>
   <span>{label}</span>
   <span>{children}</span>
  </p>
 )
}

constsinglerow=（{id，label，children}）=>{
返回(

{label}
{儿童}

)
}

同一文件中的下一个：

...

return (
 <>
  <SingleRow
   id="firstRow"
   label="sample"
  >
   row1
  </SingleRow>

  {hasPhone && <SingleRow
   id="secondRow"
   label="sample"
  >
   row2
  </SingleRow>}

  <SingleRow
   id="thirdRow"
   label="sample"
  >
   row3
  </SingleRow>
 </>
)

。。。
返回(
第1行
{hasPhone&&
第2行
}
第3行
)

hasPhone—来自道具的值，只是一个字符串

问题： 当第二个单行具有hasPhone条件时-它没有正确的HTML ID（在chrome开发工具和cypress中没有看到此ID）（应该是第二行，是：thirdRow）。当我删除条件时，一切正常，HTML ID正确

---

为什么这个条件会对HTML ID产生影响？

查看上面的代码，我只能假设，因为hasPhone是一个字符串，它被作为空字符串传递，所以第二行不会被呈现，只有第一行和第三行

const SingleRow = ({ id, label, children }) => {
  return (
    <p id={id}>
      <span>{label}</span>
      <span>{children}</span>
    </p>
  );
};

export default function App() {
  const hasPhone = "asas"; //make the string empty to omit second row

  return (
    <>
      <SingleRow id="firstRow" label="sample">
        row1
      </SingleRow>

      {hasPhone && (
        <SingleRow id="secondRow" label="sample">
          row2
        </SingleRow>
      )}

      <SingleRow id="thirdRow" label="sample">
        row3
      </SingleRow>
    </>
  );
}

constsinglerow=（{id，label，children}）=>{
返回(

{label}
{儿童}

);
};
导出默认函数App（）{
const hasPhone=“asas”；//将字符串设为空以忽略第二行
返回(
第1行
{hasPhone&&(
第2行
)}
第3行
);
}

您能看到我更新的问题吗？关于您的答案-我知道空字符串将隐藏我的组件：）问题在于渲染后重复的HTML ID。