Реагировать интегрировать компонент через функции (HOC)

Question

Я создаю шаблон администратора с использованиемactJ, и один из компонентов, составляющих всю страницу, выглядит следующим образом.

class UserManagement extends React.Component {
    state = {
        showDeleteModal: false
    };

    _toggleDeleteModal = () => {
        this.setState(prevState => ({
          showDeleteModal: !prevState.showDeleteModal
        }));
    };

    onDeleteRow = () => {
        console.log("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 в функции рендеринга, выполнение этого для других модалов приводит к избыточному коду на этой странице, который, вероятно, может быть каким-то образом извлечен.

В конце я хотел бы иметь возможность сделать что-то вроде

Answer 1

Я предполагаю, что все ваши модалы имеют одинаковую структуру, и, поскольку в любой момент времени пользователю будет показан только один модал Вы можете создать на модале многократного использования, который имеет следующие поля:

1. Название
2. Описание
3. Кнопка действия
4. Кнопка отмены

Вы можете попробовать создать что-то вроде этого:

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.log("delete");
    };

    render() {
        return (
            <div>
            {this.state.showModal && (
                <Modal
                    data={this.state.modal}
                    onToggleModal={this._toggleModal}
                />
            )}
        </div>
        );
    }

} 

Вы можете иметь одну конкретную функцию для каждого варианта использования (например, Удалить), которая устанавливает заголовок, описание и т. Д.

Вы можете в дальнейшем переместить весь код, который я показал, в HOC и импортировать его в свой компонент UserManagement, если вы думаете, что они будут выполнять статические операции без требования ввода от компонента UserManagement.

Answer 2

Я не получил ваш вопрос четко, но надеюсь, что вы спрашиваете, как вы можете извлечь компонент DeleteModal. Это, как говорится, вот моя мысль;

class UserManagement extends React.Component {

    state = {
        showDeleteModal: false
    };

    _toggleDeleteModal = () => {
        this.setState(prevState => ({
          showDeleteModal: !prevState.showDeleteModal
        }));
    };

    onDeleteRow = () => {
        console.log("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>
        );
    }

}