3

私は、ES6 クラスは基本的に ES5 オブジェクト システムの構文糖衣であるという印象を受けています。トランスパイラーなしで React を実行しようとしているので、React.Component から「継承」するオブジェクト「クラス」を定義するために古い構文を使用するだけでよいと考えました。

    var Board = function(props, state) {
        var instance = {};

        instance.props = props;
        instance.context = state;

        return(instance);           
    };

    Board.prototype = Object.create(React.Component.prototype);

    Board.prototype.render = function() {
        return(
            // ...stuff
        )               
    };

しかし、それはうまくいきません!

react.js:20478 Warning: Board(...): No `render` method found on the returned component instance: you may have forgotten to define `render`
react.js:6690 Uncaught TypeError: inst.render is not a function(…)

この gistで代替案を見つけました、および次の作品:

    var Board = function(props, state) {
        var instance = Object.create(React.Component.prototype);

        instance.props = props;
        instance.context = state;

        instance.prototype.render = function() {
            return(
                // ...stuff
            )               
        };

        return(instance);           
    };

React.createClassまた、ヘルパーを使用できることもわかりました。

しかし、React がそのような一般的な方法で定義されたクラスを処理しない理由を理解したいと思います。ES6 クラスは使用前にインスタンス化されるようです。同様の結果で、ES5 スタイルのクラスもインスタンス化されない理由はわかりません。

4

1 に答える 1