如何在 React 中制作，以便当您单击 Notification 组件中的按钮时 - 即使页面刷新也不再显示？
{!notificationHidden &&
(
<Notification
onClose={handleCalculationNotificationClose}
>
<Button onClick={handleCalculationNotificationClose}>
ОК!
</Button>
</Notification>
)
}
.
const [notificationHidden, setNotificationHidden] = useState(false);
const handleCalculationNotificationClose = () => {
setNotificationHidden(true);
};
你能告诉我如何修复代码，以便当你点击按钮时，这个功能所在的整个页面都不会被隐藏吗？
单击按钮时我只需要隐藏组件<Notification />
acomponent1并component2保留，就像它们所在的页面一样
// функции
const [hidden, setHidden] = useState(false);
if (hidden) return null;
<Component1 />
<Notification title="заголовок">
<Text weight="400" className={styles.text}>
Текст
</Text>
<div className={styles.buttonContainer} >
<Button className={styles.notificationButton} onClick={() => setHidden(true)}>
OK!
</Button>
</div>
</Notification>
<Component2 />
小伙伴们，你们好！请帮助橡胶布局：
我从移动版开始（您需要为移动设备、平板电脑和桌面版制作橡胶布局） - 我为手机制作布局，但出现问题是手机的块位于布局中一个在另一个之下，如在照片图中，在平板电脑和桌面 - 连续 - 我也画了，它们上的输入变成了徽标和配置文件按钮之间。我不明白如何实现它 - 或者读什么？谢谢！ 
<div class="header">
<div class="header__section">
<div class="header__item header__logo">
<img src="img/logo.svg" alt="">
</div>
<div class="header__search">
<input type="text" placeholder="Найти...">
</div>
<div class="header__item header__button-icon">
<a href="#"><img src="img/profile-icon.svg" alt="profile-icon"></a>
</div>
</div>
</div>
您对 info-section 部分特别感兴趣，在其他块中您不能遵循此规则：
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 1200px;
background-color: #c0dbd9;
/* height: 1000px; */
}
header {
background-color: #7faff7 ;
/* width: 1170px; */
height: 100px;
margin: 0 15px;
}
.header-button {
margin-top: 27px;
margin-left: 30px;
background-color: #A5C7F9;
border: 1px solid #000000;
border-radius: 5px;
padding: 8px 15px;
}
.header-button-text {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 20px;
}
.main-section {
background-color:#b3f95a;
display: flex;
position: relative;
width: 1170px;
height: 411px;
/* margin-top: 15px;
margin-bottom: 15px; */
margin: 15px;
}
.blocks {
background-color: #8AD191;
position: absolute;
}
.main-block-1 {
width: 390px;
height: 198px;
top: 0;
left: 0;
}
.main-block-2 {
width: 590px;
height: 198px;
left: 405px;
top: 0px;
}
.main-block-3 {
width: 160px;
height: 198px;
left: 1010px;
top: 0px;
}
.main-block-4 {
width: 995px;
height: 198px;
left: 0px;
top: 213px;
}
.main-block-5 {
width: 160px;
height: 198px;
left: 1010px;
top: 213px;
}
.info-section {
background-color: #88B5BF;
/* display: flex;
position: relative; */
/* align-items: center; */
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 30px;
gap: 30px;
max-width: 100%;
/* width: 1170px; */
margin: 0 15px;
height: 259px;
margin-bottom: 100px;
}
.info-section > div {
background-color: #0D89B0;
/* position: absolute; */
/* max-width: 100%; */
/* width: 255px; */
/* height: 199px; */
/* --w: 255px; */
/* width: var(--w); */
aspect-ratio: 4 / 3;
/* object-fit: contain; */
}
.footer {
width: 1170px;
height: 100px;
background-color: #7FAFF7;
} <div class="wrapper">
<header>
<button class="header-button"><p class="header-button-text">Open pop-up
button</p></button>
</header>
<main class="main-section">
<div class="main-block-1 blocks"></div>
<div class="main-block-2 blocks"></div>
<div class="main-block-3 blocks"></div>
<div class="main-block-4 blocks"></div>
<div class="main-block-5 blocks"></div>
</main>
<div class="info-section">
<div class="info-block-1"></div>
<div class="info-block-2"></div>
<div class="info-block-3"></div>
<div class="info-block-4"></div>
</div>
<footer>
<div class="footer"></div>
</footer>
</div>
伙计们，请帮忙。这里我有一个带有元素的块（标有复选标记的将使用 js 移动 - 非常小，循环，恒定），其他 2 个元素不会移动。但是你如何聪明地定位它们呢？当然，该方案是近似的）
我试图通过 flex 来实现，但是代码很糟糕（如果你通过顶部、左侧等编写）+ 到我需要让它适应 ipad（1024x768）的所有内容，但是当我更改所有尺寸时，一切分别移出（（（
我附上了代码，但它是错误的 - 只是一个使用 left 的例子，它看起来有多丑）
我相信这个问题有一个很好的解决方案 - 请指导我，谢谢！）
.main {
display: flex;
/* width: 100%; */
position: relative;
}
main > img {
position: absolute
}
.main-image__fourth {
height: 231px;
}
.main-image__first {
width: 125px;
}
.main-image__third {
width: 221px;
}
.main-image__fifth {
width: 257px;
height: 85px;
left: -594px;
top: 503px;
}
.main-image__sixth {
width: 1183px;
height: 239px;
left: -75px;
top: 53px;
} <div class="main">
<img class="main-image__fourth" src="/src/img/4.png" alt="">
<img class="main-image__first" src="/src/img/1.png" alt="">
<img class="main-image__third" src="/src/img/3.png" alt="">
<img class="main-image__fifth" src="/src/img/5.png" alt="">
<img class="main-image__sixth" src="/src/img/6.png" alt="">
</div>各位大侠，请帮我解决问题。我刚开始练习 Codewars，我不明白问题陈述中的短语（
下面是完整的条件：如果我们列出所有不超过 10 且是 3 或 5 倍数的自然数，我们得到 3、5、6 和 9。这些倍数之和为 23。完成解决方案，使其返回小于给定数的 3 或 5 的倍数的所有数的总和。此外，如果数字为负数，则返回 0（对于具有它们的语言）。笔记。如果一个数是 3 和 5 的倍数，则只数一次。
我不明白“小于转移号码”这句话 - 你是什么意思？提前感谢您的回复！
let sum = 0;
function solution(numbers) {
for (let i = 1; i <= 10; i++){
if(i % 3 === 0 && i % 5 === 0) {
console.log(i);
}
else if(i % 3 === 0) {
console.log(i);
}
else if (i % 5 === 0) {
console.log(i);
}
else if (i < 0) {
}
}
}