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

Question

部分"hdg警报弹出窗口">，如果状态是活动的，则它必须是"strong>"；hdg警报弹出激活"，而如果"；hdg按钮登录容器">按钮被点击它必须是"；hdg警报弹出"；，我该怎么办？

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

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

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;

Answer 2

对于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}`}>