代码之家 › 专栏 › 技术社区 › Jude Fernandes

通过功能反应集成组件(HOC)

ecmascript-5 react-router ecmascript-6 reactjs javascript

Jude Fernandes · 技术社区 · 6 年前

我正在使用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 组件。如你所见,我需要写出 删除模态 在render函数中的代码中,为其他模式执行此操作会导致此页上出现多余的代码,这些代码可能会以某种方式提取出来。

最后,我希望能做一些像这样的事情

2 回复 | 直到 6 年前

Dennis Wanjiru 6 年前

我没有弄清楚你的问题,但我希望你是在问你怎样才能把 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>
        );
    }

}

Srikar Yaganti 6 年前

我假设你所有的模态都有相似的结构,因为在任何时候只有一个模态会显示给用户可以在具有以下字段的可重用模式上创建:

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

您可以尝试创建如下内容:

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

}

对于每个用例(比如Delete),您可以有一个特定的函数来设置标题、描述等。

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