Question

我正在学习一个课程，我们在其中创建一个函数，该函数以组件和类名作为参数，并返回包装的JSX，该包装中的WrappedComponent嵌套在{{1}中}。

这确实很容易，但是我不理解<div> 的语法。为什么在return语句之后立即使用道具？我知道props => ()中是要返回的JSX。也许有人可以轻松地解释为什么道具在那里以及如何处理道具？

( )

Answer 1

您复制的示例是一个称为HOC（高阶组件）的常见反应模式。在这里发生的是以下情况，我们有一个函数，该函数将组件作为参数（WrappedComponent），并返回一个新组件的定义，该定义将包裹我们的WrappedComponent。您也可以编写以下内容

const withClass = (WrappedComponent,className) => {
   return class extends React.Component {
     render() {
       return(
        <div className={className}>
         <WrappedComponent/>
        </div>
      )
     }
   } 
};

因此，基本上，语法props => ()只是定义新组件的一种方法。值得一提的是，语法本身就是用来声明箭头功能的。

关于在函数内部返回道具的简单react / babeljs问题

1 个答案: