Сервис быстрых ответов от искусственного интеллекта
Вопрос пользователя:
Ответ нейросети:
Вот пример кода, который позволит решить данную проблему:
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ onClose }) => (
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: 'white', padding: '20px', border: '1px solid black' }}>
<p>Подробное описание React</p>
<button onClick={onClose}>Закрыть</button>
</div>
);
const DetailsButton = () => {
const [showModal, setShowModal] = useState(false);
const handleShowModal = () => {
setShowModal(true);
};
const handleCloseModal = () => {
setShowModal(false);
};
return (
<>
<button onClick={handleShowModal}>Подробнее</button>
{showModal && ReactDOM.createPortal(
<Modal onClose={handleCloseModal} />,
document.getElementById('react-id')
)}
</>
);
};
const App = () => (
<div>
<h1>Пример приложения с React</h1>
<div id='react-id'></div>
<DetailsButton />
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
В данном коде мы используем createPortal для добавления компонента Modal в div с id='react-id', когда кнопка "Подробнее" нажата. Теперь окно Modal будет отображаться в нужном месте и не будет перекрывать кнопку "Подробнее" и текст React.
Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)
Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.