通过函数(HOC)实现集成组件

问题描述 投票:0回答:2

我正在使用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
2个回答
0
投票

我没有清楚地得到你的问题,但我希望你问你如何能够提取出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>
        );
    }

} 

0
投票

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

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

} 

您可以为每个用例(如删除)设置一个特定的功能,用于设置标题,描述等。

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

© www.soinside.com 2019 - 2024. All rights reserved.