Контекст (Context) — это механизм в React, который позволяет передавать данные через дерево компонентов без необходимости передавать их вручную через пропсы. Это особенно полезно для глобальных данных, таких как тема, язык или информация о пользователе.
Создание и использование контекста
Сначала создайте контекст, используя React.createContext
:
// ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
Затем используйте Provider
для передачи значения контекста, и Consumer
или useContext
для получения данных из контекста:
// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
}
export default App;
// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedButton = () => {
const theme = useContext(ThemeContext);
return <button className={`btn btn-${theme}`}>Themed Button</button>;
};
export default ThemedButton;
Использование порталов в React
Порталы (Portals) позволяют вам рендерить дочерние элементы в другом месте в DOM, вне текущего компонента. Это полезно для модальных окон, всплывающих подсказок и других элементов, которые должны быть видимы поверх остального контента.
Создание и использование порталов
Чтобы создать портал, создайте новый DOM-элемент в index.html
:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>
</html>
Затем создайте компонент портала, используя ReactDOM.createPortal
:
// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children }) => {
const modalRoot = document.getElementById('modal-root');
return ReactDOM.createPortal(children, modalRoot);
};
export default Modal;
Теперь вы можете использовать компонент Modal
для рендеринга контента в отдельном DOM-узле:
// App.js
import React, { useState } from 'react';
import Modal from './Modal';
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => {
setIsModalOpen(!isModalOpen);
};
return (
<div>
<button onClick={toggleModal}>Toggle Modal</button>
{isModalOpen && (
<Modal>
<div className="modal">
<h2>Modal Content</h2>
<button onClick={toggleModal}>Close Modal</button>
</div>
</Modal>
)}
</div>
);
};
export default App;
В этом примере мы создали модальное окно, которое будет отображаться поверх остального контента при нажатии на кнопку «Toggle Modal». С помощью порталов мы можем обеспечить правильное позиционирование модального окна и изолировать его от других компонентов.
Заключение
Контекст и порталы являются полезными и мощными инструментами в ReactJS. Они позволяют передавать данные через дерево компонентов без пропсов и рендерить контент в других частях DOM. Это может быть очень полезно при работе с глобальными данными и создании элементов, которые должны быть видимы поверх остального контента, таких как модальные окна и всплывающие подсказки.