Question

请检查以下代码。通常export实现到模块中的组件。但是，在此程序中，似乎还导出了其他内容：export default screenHoc(\)(Login);。
谁能解释一下这条线的工作方式吗？有人可以清楚地说明React中的Exports

import React from "react";
import {screenHoc} from "ui-hocs";
import {Div} from "ui-atoms";
import {RenderScreen} from "ui-molecules";

class Login extends React. Component {
  render()
  {
 
    return (
      <Div>
        <Div style = {{ textAlign:"center", color:"#3f51b5"}}>
          <h2>USER LOGIN FORM</h2>
        </Div>
          <RenderScreen
            components={this.props.components}
            uiFramework={this.props.uiFramework}
            onFieldChange={this.props.onFieldChange}
            onComponentClick={this.props.onComponentClick}
          />
      </Div>
    )
  }
}

export default screenHoc({path:"core",screenKey:"login"})(Login);

Answer 1

正如您正确提到的，export default语句用于导出此模块的组件-Loign。
但是，在这种情况下，Login组件被传递到screenHoc higher order component中，这是一种高级React模式，通常用于向原始组件添加一些其他功能（或数据）。

简而言之-此行返回什么：

screenHoc({path:"core",screenKey:"login"})(Login)

是Login组件的“改进”或“丰富”版本，这就是从此模块中导出的内容。

在React JS中导出函数

1 个答案: