React 通过函数集成组件（HOC）答案

【问题标题】：React integrate component through functions ( HOC )React 通过函数集成组件（HOC）
【发布时间】：2023-03-09 23:02:01
【问题描述】：

我正在使用 reactJs 构建一个管理模板，构成整个页面的组件之一如下所示。

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 代码，对其他模态执行此操作会导致此页面上的多余代码可能会以某种方式被提取出来。

最后我希望能够做类似的事情

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-router ecmascript-5

【解决方案1】：

我没有清楚地了解您的问题，但希望您问的是如何提取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>
        );
    }

}

【讨论】：

【解决方案2】：

我假设您拥有的所有模态都具有相似的结构，因为在任何时间点都只会向用户显示一个模态您可以在具有以下字段的可重用模式上创建：

标题
说明
操作按钮
取消按钮

你可以尝试创建这样的东西：

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>
        );
    }

}

您可以为每个用例（如删除）设置一个特定的函数来设置标题、描述等。

如果您认为它们将执行静态操作而不需要来自 UserManagement 组件的输入，您可以进一步将我展示的所有代码移动到 HOC 并将其导入您的 UserManagement 组件。

【讨论】：