Реагировать на интеграцию компонента через функции (HOC)
Я создаю шаблон администратора с помощью responseJs, и один из компонентов, составляющих всю страницу, выглядит так.
class UserManagement extends React.Component {
state = {
showDeleteModal: false
};
_toggleDeleteModal = () => {
this.setState(prevState => ({
showDeleteModal: !prevState.showDeleteModal
}));
};
onDeleteRow = () => {
console.info("delete");
};
render() {
return (
<div>
{this.state.showDeleteModal && (
<DeleteModal
title = "Delete Data ?"
description = "Are you sure you want to delete this data from the system ?"
onDeleteAction = {this.onDeleteRow}
onToggleModal = {this._toggleDeleteModal}
/>
)}
</div>
);
}
}
DeleteModal - это, по сути, модальное окно, которое всплывает и отображает пользователю набор опций, на основе которых пользователь выбирает опцию, это один из многих модальных окон, содержащихся в этом компоненте UserManagement. Как видите, мне нужно записать код DeleteModal в функции рендеринга, выполнение этого для других модальных окон приводит к появлению на этой странице лишнего кода, который, вероятно, можно каким-то образом извлечь.
В конце концов, я хотел бы иметь возможность сделать что-то вроде этого
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я не получил четкого ответа на ваш вопрос, но надеюсь, что вы спрашиваете, как извлечь компонент DeleteModal. При этом, вот моя мысль;
class UserManagement extends React.Component {
state = {
showDeleteModal: false
};
_toggleDeleteModal = () => {
this.setState(prevState => ({
showDeleteModal: !prevState.showDeleteModal
}));
};
onDeleteRow = () => {
console.info("delete");
};
renderDeleteModal = () => (
<DeleteModal
title = {"Delete Data ?"}
description = {
"Are you sure you want to delete this data from the system ?"
}
onDeleteAction = {this.onDeleteRow}
onToggleModal = {this._toggleDeleteModal}
/>
);
render() {
return (
<React.Fragment>
{this.state.showDeleteModal && this.renderDeleteModal}
</React.Fragment>
);
}
} Я предполагаю, что все модальные окна, которые у вас есть, имеют аналогичную структуру, и поскольку в любой момент времени пользователю будет показан только один модальный код. вы можете создать многоразовое модальное окно со следующими полями:
- Заголовок
- Описание
- Кнопка действия
- Кнопка отмены
Вы можете попробовать создать что-то вроде этого:
class UserManagement extends React.Component {
constructor(props) {
this.state = {
showModal: false,
modalTitle: "",
modalDescription: "",
modalAction: null
}
}
showDeleteModal() {
this.setState(prevState => ({
modalTitle: "Delete Data ?",
modalDescription: "Are you sure you want to delete this data from the system ?",
modalAction: this.onDeleteRow
}), this._toggleDeleteModal)
}
_toggleDeleteModal = () => {
this.setState(prevState => ({
showModal: !prevState.showModal
}))
};
onDeleteRow = () => {
console.info("delete");
};
render() {
return (
<div>
{this.state.showModal && (
<Modal
data = {this.state.modal}
onToggleModal = {this._toggleModal}
/>
)}
</div>
);
}
}
У вас может быть одна конкретная функция для каждого вашего варианта использования (например, Удалить), которая устанавливает этот заголовок, описание и т. д.
Вы также можете переместить весь код, который я показал, в HOC и импортировать его в свой компонент UserManagement, если вы думаете, что они будут выполнять статические операции без требований ввода от компонента UserManagement.