Условное появление аттрибута работает в React, но не работает в Next.js?

Question

Почему в Next.js отмеченная строка при false отображается в html, как data-text-btn-active="false"? Вместо того, чтобы не отображаться вовсе? Это boolean значение.

Я только что в реакте делал тоже самое и все предсказуемо отрабатывает (атрибут просто не появляется в html). Это же фреймворк на базе реакта? Или я что-то не так делаю?

const TextButton: React.FC<TextButtonProps> = ({ thisSlide, currentSlide }) => {
  const [isActive, setIsActive] = React.useState(false);

  const onTextBtnClick = () => {
    setIsActive((b) => !b);
  };

  return (
    <button
      onClick={onTextBtnClick}
      className={s.textBtn}
      data-text-btn-active={isActive ? true : false} // ЭТА СТРОКА
      aria-label={`Show / hide entire message.`}
      aria-pressed={isActive ? "true" : "false"}></button>
  );
};

Answer 1

В React и Next.js, преобразование значений в атрибутах HTML может происходить несколько иначе, чем в чистом JavaScript или HTML. В данном случае, даже если isActive является булевым значением true или false, React преобразует его в соответствующую строку при рендеринге.

Если вам необходимо, чтобы атрибут вообще не появлялся в HTML, когда isActive равен false, вам следует использовать логический оператор && или условный оператор.

Вот пример, как это можно сделать:

const TextButton: React.FC<TextButtonProps> = ({ thisSlide, currentSlide }) => {
  const [isActive, setIsActive] = React.useState(false);

  const onTextBtnClick = () => {
    setIsActive((prev) => !prev);
  };

  const buttonProps = {
    onClick: onTextBtnClick,
    className: s.textBtn,
    "aria-label": "Show / hide entire message.",
    "aria-pressed": isActive ? "true" : "false",
  };

  if (isActive) {
    buttonProps["data-text-btn-active"] = true;
  }

  return <button {...buttonProps}></button>;
};

В этом примере мы создаем объект buttonProps, который содержит все свойства кнопки. Затем мы проверяем, активно ли состояние (isActive), и если да, добавляем свойство data-text-btn-active к объекту buttonProps. Наконец, мы передаем этот объект как пропсы для кнопки.

БЛОГ НА HUSL

Условное появление аттрибута работает в React, но не работает в Next.js?

Ответы (1 шт):