ES6 中嵌套类的上下文很奇怪

IT技术 javascript reactjs firefox webpack
2021-04-25 23:05:48

我有以下嵌套类结构：

import React, {Component} from 'react';
import {TextField} from '@material-ui/core';
import './ProfileEditor.css';

export default class ProfileEditor extends Component {
    SyncedTextField = class SyncedTextField extends Component {
        onChange = event => {
            console.log(this);
        };

        render() {
            return (
                <TextField
                    {...this.props}
                    onChange={this.onChange}/>
            );
        }
    };

    render() {
        return (
            <form className={"ProfileEditor"}>
                <this.SyncedTextField/>
            </form>
        );
    }
}

当代码被 Webpack 捆绑并在 Firefox 中运行时，它可以this.onChange正确运行，但输出的this是ProfileEditor类的上下文。

这太奇怪了，因为在 JSX 中，当我提到“this”时，它正确地指向 SyncedTextField，但在 onChange 方法中，它指向ProfileEditor.

我确实添加了一些属性来ProfileEditor自己进行完整性检查，并且这些属性显示为 中声明的ProfileEditor，即使在 SyncedTextField 中提供了一个冲突的定义。

有人可以告诉我如何避免这个问题，以及可能导致它的原因是什么？

1个回答

不正确的行为可能特定于浏览器开发工具。但在这种情况下，它是由转译器的工作方式引起的。Babel 6 类字段（第 3 阶段提案）转换实现中存在错误。

该示例与巴贝尔编译输出ProfileEditor如this在onChange。

这是SyncedTextFieldBabel 输出的构造函数：

function SyncedTextField() {
  var _ref2;

  var _temp2, _this2, _ret2;

  _classCallCheck(this, SyncedTextField);

  for (
    var _len2 = arguments.length, args = Array(_len2), _key2 = 0;
    _key2 < _len2;
    _key2++
  ) {
    args[_key2] = arguments[_key2];
  }

  return (
    (_ret2 = ((_temp2 = ((_this2 = _possibleConstructorReturn(
      this,
      (_ref2 =
        SyncedTextField.__proto__ ||
        Object.getPrototypeOf(SyncedTextField)).call.apply(
        _ref2,
        [this].concat(args)
      )
    )),
    _this2)),
    (_this2.onChange = function(event) {
      console.log(_this); // SHOULD BE _this2
    }),
    _temp2)),
    _possibleConstructorReturn(_this2, _ret2)
  );
}

请注意，转译器创建_this,_this2等临时变量以this在箭头函数中提供词法，但 Babel 使用了错误的变量。

onChange = ... 类字段是以下方面的语法糖：

  constructor(...args) {
    super(...args);

    this.onChange = event => {
        console.log(this);
    };
  }

当示例从类字段更改为构造函数代码时，它会输出SyncedTextField.

同样的例子有typescript编译（使用Stackblitz默认情况下做出react的模板）按预期工作和产出SyncedTextField为this中onChange。

由于类很少以这种方式定义，因此 Babel 错误通常不适用。

SyncedTextField = class SyncedTextField extends Component {...}是一种反模式。没有理由像这样嵌套类表达式。它是低效的，因为它在每个ProfileEditor实例化时都被评估。它应该是类声明，可以用作<SyncedTextField/> this way.

即使出于可测试性或可扩展性的原因SyncedTextField应该将其定义为ProfileEditor组件的属性，最好将其设为原型属性：

class SyncedTextField extends Component {...}

class ProfileEditor extends Component {
  get SyncedTextField() { return SyncedTextField }
  ...
}
其它你可能感兴趣的问题
上一篇在 react js 中渲染动态 html 下一篇单击reactjs时如何重新加载表格