反应如何在状态更改时更改 div 名称

Question

“hdg-alert-popup”部分，如果状态处于活动状态，则必须是“hdg-alert-popup active” 而如果“hdg-button-login-container”按钮被点击它必须是“hdg-alert-popup”，我该怎么办？

import parse from 'html-react-parser';
import React, { useEffect, useState } from 'react';

const MessageError = (
  titolo: string,
  descrizione1: string,
  descrizione2: string,
  testoBottone: string,

) => {
  const [active, setActive] = useState(true);
  if (testoBottone == "") {
    testoBottone = "Chiudi questo avviso";
  }

  return (
    <section
      className="hdg-alert-popup"
    >

      <div className="hdg-login-popup">
        <div className="hdg-login-popup-container">
          <div className="hdg-login-popup-content">

            <h3 className="hdg-title">{parse(titolo)}</h3>
            <p>
              {descrizione1}
              {descrizione2 != "" && <b>{descrizione2}</b>}
            </p>
          </div>
          <div className="hdg-login-popup-error">
            <div className="hdg-button-login-container"><a href="#" className="hdg-button-back">{testoBottone}</a></div>

          </div>

        </div>

      </div>
    </section>
  );
};

export default MessageError;

Answer 1

好吧，对于button，你可以根据状态设置className：

<div className={active ? "hdg-alert-popup": "hdg-button-login-container"} onClick={() => setActive(state => !state)}><a href="#" className="hdg-button-back">{testoBottone}</a></div>

对于section，你可以做类似的事情：

<section className={`hdg-alert-popup ${active ? "active" : null}`}>

Answer 2

这可以通过主动切换来实现吗？

import parse from 'html-react-parser';
import React, { useEffect, useState } from 'react';

const MessageError = (
  titolo: string,
  descrizione1: string,
  descrizione2: string,
  testoBottone: string,

) => {
  const [active, setActive] = useState(true);
  if (testoBottone == "") {
    testoBottone = "Chiudi questo avviso";
  }

  return (
    <section
      className=`hdg-alert-popup ${active ? "active": '' }`
    >

      <div className="hdg-login-popup">
        <div className="hdg-login-popup-container">
          <div className="hdg-login-popup-content">

            <h3 className="hdg-title">{parse(titolo)}</h3>
            <p>
              {descrizione1}
              {descrizione2 != "" && <b>{descrizione2}</b>}
            </p>
          </div>
          <div className="hdg-login-popup-error">
            <div className="hdg-button-login-container" onClick={() => this.setActive(false)}><a href="#" className="hdg-button-back">{testoBottone}</a></div>

          </div>

        </div>

      </div>
    </section>
  );
};

export default MessageError;