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

Posted 2023-02-22

【中文标题】React 通过函数集成组件（HOC）

【英文标题】：React integrate component through functions ( HOC )

【发布时间】：2019-02-13 16:59:58

【问题描述】：

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

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

【参考方案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 组件。