javascript - 将组件作为普通 JS 对象进行 react ？

Question

是否有人有使用 React 组件作为普通 JS 对象而不是烦人的 ES6 类和已弃用的 .createClass 方法的经验。

也许您有一些工厂函数或类似函数的示例可以分享？

谢谢!

Answer 1

React.Component 是一个普通的 JavaScript 函数，因为 es6 类是围绕它们的语法糖。所以我们可以使用任何我们喜欢的 es5 类概念，例如我只是在这里借用了 Backbone 的 extend 方法:

// From backbone
var extend = function(protoProps) {
    var parent = this;
    var child;

    var extendObj = function(obj1, obj2) {
       for (var i in obj1) {
          if (obj1.hasOwnProperty(i)) {
             obj2[i] = obj1[i];
          }
       }
    };

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent constructor.
    if (protoProps && hasOwnProperty.call(protoProps, 'constructor')) {
      child = protoProps.constructor;
    } else {
      child = function() { return parent.apply(this, arguments); };
    }

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent` constructor function.
    var Surrogate = function(){ this.constructor = child; };
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate;

    // Add prototype properties (instance properties) to the subclass,
    // if supplied.
    if (protoProps) extendObj(child.prototype, protoProps);

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
};

React.Component.extend = extend;

然后我们可以创建这样的组件:

var MyComponent = React.Component.extend({
    constructor: function() {
        console.log('hello from react component');

        this.state = {
            open: false
        };

        React.Component.apply(this, arguments);
    }
});

new MyComponent();

这只是一个示例(未经测试)，您可以执行您喜欢的任何类型的原型(prototype)实现，因为它只是一个普通函数。如果您搜索“es5继承”，您应该能够应用这些解决方案中的任何一个。