Блог

Я использую NextJS в своем текущем проекте. Один из компонентов имеет компонент поддержки для рендеринга одной строки:

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

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

и далее в том же файле:

 ...

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

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

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

hasPhone — значение из реквизита, просто строка.

Проблема: когда второй SingleRow имеет условие hasPhone — у него неверный идентификатор HTML (в chrome dev tools и cypress не видит этот идентификатор) (должно быть secondRow, это: thirdRow). Когда я удаляю условие, все работает нормально, идентификаторы HTML верны.

Почему это условие влияет на идентификатор HTML?

Глядя на приведенный выше код, я могу только предположить, что, поскольку 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 amp;amp; (
        <SingleRow id="secondRow" label="sample">
          row2
        </SingleRow>
      )}

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