wake-up-neo.com

React.js-Komponenten erweitern

Eines der Dinge, die ich an Backbone.js am meisten schätze, ist die einfache und elegante Funktionsweise der Vererbung. Ich fange an, mich mit React auseinanderzusetzen, und kann nichts in React finden, das diesem Backbone-Code ähnelt

var Vehicle = Backbone.View.extend({
    methodA: function() { // ... }
    methodB: function() { // ... }
    methodC: function() { // ... }
});

var Airplane = Vehicle.extend({
    methodC: function() {
        // Overwrite methodC from super
    }
});

In react we have mixins , und mit denen könnten wir dem obigen Beispiel etwas nahe kommen, wenn wir so weitermachen

var vehicleMethods = {
    methodA: function() { // ... }
    methodB: function() { // ... }
}

var Vehicle = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() { 
        // Define method C for vehicle
    }
});

var Airplane = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() {
        // Define method C again for airplane
    }
});

Dies ist weniger repetitiv als das wiederholte Definieren des gleichen Materials, aber es scheint nicht annähernd so flexibel zu sein wie der Backbone-Weg. Ich erhalte beispielsweise eine Fehlermeldung, wenn ich versuche, eine in einem meiner Mixins vorhandene Methode neu zu definieren/zu überschreiben. Darüber hinaus ist der Weg von React.js mehr Code, den ich schreiben kann.

Es sind einige unglaublich clevere Dinge in React enthalten, und ich habe eher das Gefühl, dass ich nicht weiß, wie ich das richtig machen soll, als dass es sich um eine Funktion handelt, die in React fehlt.

Hinweise werden sehr geschätzt.

javascriptinheritancebackbone.jsreactjs
67
Ahrengot

Um etwas zu erhalten, das der Vererbung (tatsächlich Zusammensetzung ähnelt, wie in den Kommentaren angegeben), können Sie in Ihrem Beispiel ein Airplane einwickeln a Vehicle. Wenn Sie Methoden für Vehicle in der Komponente Airplane verfügbar machen möchten, können Sie ein ref verwenden und sie einzeln verbinden. Dies ist nicht genau Vererbung (es ist eigentlich Zusammensetzung ), vor allem, weil die this.refs.vehicle ist erst verfügbar, nachdem die Komponente montiert wurde.

var Vehicle = React.createClass({
    ...
});

var Airplane = React.createClass({
    methodA: function() {
      if (this.refs != null) return this.refs.vehicle.methodA();
    },
    ...
    render: function() {
        return (
            <Vehicle ref="vehicle">
                <h1>J/K I'm an airplane</h1>
            </Vehicle>
        );
    }
});

Erwähnenswert ist auch, dass sie in der React official documentation die Komposition der Vererbung vorziehen:

Was ist also mit Vererbung? Bei Facebook verwenden wir React in Tausenden von Komponenten, und wir haben keine Anwendungsfälle gefunden, in denen wir die Erstellung von Komponentenvererbungshierarchien empfehlen würden.

Requisiten und Kompositionen bieten Ihnen die Flexibilität, die Sie benötigen, um das Aussehen und Verhalten einer Komponente auf explizite und sichere Weise anzupassen. Denken Sie daran, dass Komponenten beliebige Requisiten akzeptieren können, einschließlich primitiver Werte, React Elementen oder Funktionen.

Wenn Sie Nicht-UI-Funktionen zwischen Komponenten wiederverwenden möchten, empfehlen wir, sie in ein separates JavaScript-Modul zu extrahieren. Die Komponenten können es importieren und diese Funktion, dieses Objekt oder eine Klasse verwenden, ohne es zu erweitern.

Erwähnenswert ist auch, dass Sie mit ES2015/ES6 + die Objektstützen von der Komponente Airplane auf die Komponente Vehicle verteilen können

render: function() {
    return (
        <Vehicle {...this.props}>
            <h1>J/K I'm an airplane</h1>
        </Vehicle>
    );
}
59
Ross Allen

Wenn Sie ein in Ihrem Projekt eingerichtetes webpack + babel + react NPM-Paket verwenden, sollte die Implementierung in ES6 OOP=) so einfach sein:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class BaseComponentClass extends Component {
  componentDidMount() {} 
  render() { return (<div>Base Component</div>) }
}
class InheritedComponentClass extends BaseComponentClass {
  // componentDidMount is inherited
  render() { return (<div>Inherited Component</div>) } // render is overridden 
}
ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>, 
     document.getElementById('InheritedComponentClassHolder'));

Hinweis: Hier ist ein einfaches Starterkit mit einer solchen Konfiguration: https://github.com/alicoding/react-webpack-babel

4
Ashot