Question

在一个教程中，我遇到了以下代码：

import React from 'react';

const withClass = (WrappedComponent, className) => {
    return (props) => (
        <div className={className}>
            <WrappedComponent {...props}/>
        </div>
    );
}

export default withClass;

现在我知道代码的作用，但是我不知道在JSX元素上使用扩展运算符{...props}会导致所有元素都在<WrappedComponent />上的原因。我也知道JSX已编译为React.createElement()函数调用，并且基本上都是JS。

如果将这种扩展运算符语法{...props}转换为React.createElement调用（即编译后的JS），将如何看待？

Answer 1

这种扩展运算符语法{... props}会如何转换为react.createElement调用？

由于您不明确说明哪些道具被传递，因此我将假设道具foo，bar和baz。当然，可以是任意数量的道具：

React.createElement(
  WrappedComponent,
  {foo: props.foo, bar: props.bar, baz: props.baz}
)

Answer 2

散布运算符会将所有对象的键传递给您的组件。因此，React将以这种方式转换您的代码：

React.createElement(WrappedComponent, props);

Answer 3

babel将编译您的代码以接受props作为将要创建Javascript的元素的参数。

所以您的代码将像这样

编译

var withClass = function withClass(WrappedComponent, className) {
    return function (props) {
        return React.createElement(
            "div",
            { className: className },
            React.createElement(WrappedComponent, props)
        );
    };
};

因为如果您不使用扩展操作符发送对象，则该示例类似于

  <WrappedComponent allProps={"hello"}/>

到

  React.createElement(WrappedComponent, { allProps: "hello" })

您可以尝试使用here工具来尝试babel如何用纯Javascript编译代码。

JSX传播运算符用法

3 个答案: