Мне нравятся модальные окна, потому что они экономят много времени, необходимого для загрузки новой вкладки. В этом посте мы узнаем, как создать потрясающий многоразовый модальный файл с помощью React с нуля.
Вот шаги для этого урока:
Что мы узнаем
- Создайте простую файловую структуру
- Используйте состояние переключения реакции, чтобы создать простое модальное окно
- Передача данных между компонентами с помощью свойств
- Предупредить пользователя о необходимости передать параметр при использовании компонента
Совет: при использовании компонентов React делитесь ими с Bit, чтобы они стали многократно используемыми строительными блоками, которые ваша команда может легко обмениваться, использовать и синхронизировать в ваших проектах. Строя из общей коробки Lego, вы строите быстрее. Попытайся:
Создание Modal компонентной структуры
Итак, сначала давайте добавим шаблонный код.
import React from "react";export default class Modal extends React.Component { render() { return <div>Hello Modal</div>; } }
Затем давайте включим Modal в главный App.
import React from "react"; import Modal from "./Component/Modal"; import "./styles.css"; class App extends React.Component { render() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Modal /> </div> ); } }export default App;
Теперь введите App компонент в точку входа.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);Вот результат после начальной настройки.
Переключение состояния модального окна
Механизм модального окна состоит в том, чтобы показать и скрыть. Этого довольно легко добиться в реакции из-за встроенного состояния переключения.
Сначала создайте кнопку для переключения состояния.
<button onClick={e => {
this.showModal();
}}
> show Modal </button>Теперь создайте showModal функцию
state = {
show: false
};
showModal = e => {
this.setState({
show: true
});
};Теперь примените это состояние к Modal компоненту.
<Modal show={this.state.show} />Затем сделайте условный рендеринг из Modal с состоянием show.
Не забудьте вернуть null, если show равно false, это ничего не отображает. Визуализируйте компонент, когда show равно true.
export default class Modal extends React.Component {
render() {
if(!this.props.show){
return null;
}
return <div>Hello Modal</div>;
}
}Нажмите кнопку - результат должен быть примерно таким.
Сделайте контент динамичным
Сейчас содержимое Modal жестко запрограммировано. Давайте сделаем его динамичным, передав опору.
<Modal show={this.state.show}>Message in Modal</Modal>Замените Сообщение на {this.props.children} в компоненте Modal.
export default class Modal extends React.Component {
render() {
if (!this.props.show) {
return null;
}
return <div>{this.props.children}</div>;
}
}Это отобразит все, что передается этому компоненту, что идеально подходит для динамического модального окна.
Закройте модальный
После открытия модального окна его нужно закрыть.
Давайте добавим новую кнопку закрытия.
return (
<div>
<div>{this.props.children}</div>
<div>
<button
onClose={e => {
this.onClose(e);
}}
>
Close
</button>
</div>
</div>
);Определите функцию onClose.
onClose = e => {
this.props.show = false;
};Теперь установите состояние show на false, что заставит Modal скрываться.
Ждать! Это не работает, потому что состояние show определено в компоненте App.
Итак, передайте значение обратно компоненту приложения.
onClose = e => {
this.props.onClose && this.props.onClose(e);
};Теперь передайте весь объект события обратно App компоненту, затем активируйте showModal
<Modal onClose={this.showModal} show={this.state.show}>
Message in Modal
</Modal>И переключите состояние show:
showModal = e => {
this.setState({
show: !this.state.show
});
};Результат скрывает кнопку закрытия, как и ожидалось.
Стилизация модального окна
Прямо сейчас вы не видите модального тела, потому что его там нет.
Давайте создадим modal.css.
Возьмите фрагмент CSS из Codepen здесь.
Кроме того, включите JavaScript в Modal.js и добавьте класс modal в возвращаемый div и другие классы, как показано ниже.
import React from "react"; import "./modal.css";export default class Modal extends React.Component { onClose = e => { this.props.onClose && this.props.onClose(e); }; render() { if (!this.props.show) { return null; } return ( <div class="modal" id="modal"> <h2>Modal Window</h2> <div class="content">{this.props.children}</div> <div class="actions"> <button class="toggle-button" onClick={this.onClose}> close </button> </div> </div> ); } }
В компоненте App добавьте к кнопке класс toggle-button.
<div className="App">
<button
class="toggle-button"
id="centered-toggle-button"
onClick={e => {
this.showModal(e);
}}
>А теперь результат! Разве это не красиво? 💅
Требовать onClose
Если компонент, вызывающий Modal, не проходит onClose, Modal не закроется, так как состояние show не имеет никакого эффекта. Чтобы исправить это, предупредите компонент о передаче onClose.
Импорт prop-types.
import PropTypes from "prop-types";Добавьте следующее в конец файла вне класса.
Modal.propTypes = {
onClose: PropTypes.func.isRequired,
show: PropTypes.bool.isRequired
};Это приводит к предупреждению, как показано ниже.
Резюме
В этом руководстве вы узнали, как реализовать простой модальный компонент, который вы создали с помощью div и использовали состояние переключения для отображения и скрытия модального окна. Мы прошли различные шаги от создания файловой структуры до стилизации нашего модального окна. Вы можете найти полный код на GitHub здесь:
Надеюсь, вам понравился этот пост, и, пожалуйста, оставьте несколько 👏 и оставьте комментарий ниже, чтобы спросить меня о чем угодно! Я всегда рад поговорить и помочь.
