L'extension de React.js composants

L'une des choses que j'apprécie le plus sur Backbone.js est la façon simple et élégante de l'héritage fonctionne. Je commence à m'attaquer à Réagir, et ne peut pas vraiment trouver quelque chose à réagir qui ressemble à ce Squelette de code

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

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

À réagir, nous ont mixin, et à l'aide de ceux que nous avons pu obtenir assez proche de l'exemple ci-dessus, si nous allions comme ce

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
    }
});

C'est moins répétitif que de définir les mêmes choses, encore et encore, mais il ne semble pas être aussi souple comme l'épine Dorsale façon. Par exemple, j'obtiens un message d'erreur si j'essaie de redéfinir/remplacer une méthode qui existe dans l'un de mes mixin. En plus de cela, la React.js plus de code pour moi d'écrire.

Il y a quelques incroyablement intelligent trucs à réagir, et il se sent comme ce n'est plus le cas à moi de ne pas obtenir de la manière de bien faire, qu'il se sent comme une fonctionnalité manquante à partir de Réagir.

Tous les pointeurs sont grandement appréciés.

Je trouve la composition suivante approche tout à fait intéressante. C'est l'abandon de la vanille mixin: medium.com/@dan_abramov/...
Ce serait bien si ce qui Réagir la communauté décide d'utiliser pour l'encapsulation/réutilisation de code serait distincte de la Réagir cadre. Il peut donc être utilisé à l'extérieur de Réagir, et donc qu'il n'y a plus de choix au sein de Réagir. Vers le bas avec les monolithes!

InformationsquelleAutor Ahrengot | 2014-09-08

59

Pour obtenir quelque chose qui ressemble à de l'héritage (en fait composition comme l'a souligné dans les commentaires), vous pouvez faire un Airplane dans votre exemple, l'envelopper dans une Vehicle. Si vous souhaitez exposer des méthodes sur Vehicle dans le Airplane composant, vous pouvez utiliser un ref et connecter un par un. Ce n'est pas exactement l'héritage (c'est en fait composition), notamment parce que la this.refs.vehicle ne sera pas accessible jusqu'à ce que une fois que le composant a été monté.
```
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>
        );
    }
});
```
Aussi il vaut la peine de mentionner que dans le Réagir la documentation officielle ils préfèrent la composition au cours de l'héritage:

Alors Que Dire De L'Héritage? Sur Facebook, nous utilisons Réagir en milliers de
composants, et nous n'avons pas trouvé de cas d'utilisation où nous
recommander composant de création de hiérarchies d'héritage.

Des accessoires et de la composition vous donner toute la souplesse dont vous avez besoin pour
personnaliser un composant de l'apparence et du comportement explicitement et de façon sécuritaire.
Rappelez-vous que les composants peuvent accepter l'arbitraire des accessoires, y compris
des valeurs primitives, de Réagir éléments ou fonctions.

Si vous souhaitez réutiliser des non-INTERFACE fonctionnalité entre les composants, nous
suggérer l'extraire dans un autre module JavaScript. L'
les composants peuvent importer et d'utiliser cette fonction, un objet ou une classe,
sans l'étendre.

Une autre chose intéressante à mentionner que l'utilisation de ES2015/ES6+ vous pouvez aussi diffuser l'objet d'accessoires de Airplane composant à la Vehicle composant
```
render: function() {
    return (
        <Vehicle {...this.props}>
            <h1>J/K I'm an airplane</h1>
        </Vehicle>
    );
}
```
- La Composition, comme vous l'avez ici, est généralement l'approche que nous proposons. Je vais ajouter que, lorsque vous faites cela, vous pourriez même pas besoin de la méthodes que vous pensez que vous pourriez avoir besoin et peut communiquer plus par le biais d'accessoires et de nouveau rendu.
- Merci, @PaulO'Shannessy. J'ai ajouté une note que c'est en fait la composition.
- C'est très bien, sauf si vous souhaitez envelopper/étendre les méthodes comme #componentWillMount(), qui sont appelés à un moment où refs n'est pas encore disponible.
- Ci-dessous, quelqu'un a suggéré d'utiliser reactto. Mais je suppose que cette réponse est plus approprié que de choses à Réagir devraient être mieux fait de Réagir de la sorte. Oui, le style de composition de Réagir rend ici plus de sens.
- Je pense que le fait que cette réponse utilisé ellipses est exactement l'élision que je vois dans l'argument de la composition. Vous êtes en laissant une énorme quantité de passe-partout. Comment est-ce une meilleure solution que l'original s'il peut être considéré comme "correct"?
- Je pense que Si mon baseComponent est abstrait, je ne veux pas le rendre. Ce cas ne sera pas obtenir de l'baseComponent du ref et ne peut pas accéder à baseComponent méthodes.
InformationsquelleAutor Ross Allen
5

Si vous utilisez webpack+babel+réagir MNP paquet mis en place dans votre projet, puis dans l'ES6 OOP mise en œuvre, il devrait être aussi simple que cela:
```
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'));
```
Note: Voici un kit de démarrage avec une telle configuration: https://github.com/alicoding/react-webpack-babel
- Attention à tout cela. Vous pouvez rencontrer des problèmes en bas de la route depuis Réagir recommande l'utilisation de la composition au cours de l'héritage. Je l'ai fait et j'ai dû revenir sur cette approche de la mi de projet. Il n'était pas amusant.
- Très intéressant, et bien sûr, la Réagir docs dire exactement ce que: "À Facebook, nous utilisons Réagir en milliers de composants, et nous n'avons pas trouvé de cas d'utilisation où nous recommandons de composant de création de hiérarchies d'héritage... Si vous souhaitez réutiliser des non-INTERFACE fonctionnalité entre les composants, nous vous suggérons de l'extraire dans un autre module JavaScript. Les composants peuvent importer et d'utiliser cette fonction, un objet ou une classe, sans prolongation." [emph mine] Un class incompatible état d'esprit, il semble.
- J'ai créé un travail de démonstration pour mettre en valeur ce modèle et la façon dont les méthodes sont écrasés! codesandbox.io/s/nice-robinson-8lk4y
InformationsquelleAutor Ashot

En tirant parti de ReactOO, vous pouvez facilement utiliser l'héritage (Avertissement: je suis l'auteur de ReactOO):

JS:

(function () {

    //Class definitions. ReactOO requires class definition first just like you did in an OO way.

    window.Vehicle = window.ReactOO.ReactBase.extend({
        getReactDisplayName: function () {
            return 'Vehicle';
        },

        onReactRender: function (reactInstance) {
            var self = this;

            var text = self.methodC();

            return React.createElement('div', {}, text);
        },

        methodA: function () {
            console.log('Vehicle method A');
        },

        methodB: function () {
            console.log('Vehicle method B');
        },

        methodC: function () {
            return 'Vehicle method C';
        }
    });

    window.Airplane = window.Vehicle.extend({
        getReactDisplayName: function () {
            return 'Airplane';
        },

        methodC: function () {
            //Call this._super() to execute parent method.
            //this._super();
            return 'Airplane method C';
        }
    });

    var vehicle = new window.Vehicle();
    vehicle.render({}, '#vehicle');

    var airPlane = new window.Airplane();
    airPlane.render({}, '#airPlane');
})();

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ReactOO Vehicle-Aireplane Example</title>
    <link rel="stylesheet" href="css/base.css" />
    <script src="scripts/react.js"></script>
    <script src="scripts/react-dom.js"></script>
    <script src="../src/reactoo.js"></script>
</head>
<body>
    <div id="vehicle">
    </div>
    <div id="airPlane">
    </div>
    <script src="scripts/vehicleAirplane.js">
    </script>
</body>
</html>

L'extension de React.js composants

InformationsquelleAutor Jim Ma

-4

Je pense que l'extension peut être fait avec l'aide de jQuery.extend ou similaire

De Base.jsx

module.exports = {
    methodA:function(){
        ...
    }
}

Enfant.jsx

var Base = require('./Base.jsx');

module.exports = React.createClass($.extend({},Base,{
    methodB:function(){
        ...
        this.methodA();
        ...
    },
    render:function(){
        return ...
    }
}));

InformationsquelleAutor pgregory

Vous devez vous connecter pour publier un commentaire.