Quel est le Réagissent équivalent d'un Angulaire de la directive qui ne fonctionne que sur les attributs?

Par exemple, vous pourriez avoir une directive angulaire de la sorte:

angular.module('app')
.directive('classy', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       $el.addClass('stay-classy');
    }
  }
}

Et de mettre en œuvre comme suit: 

<div classy></div>

Il ne semble pas être un équivalent de Réagir que j'ai vu après avoir lu la plupart de la documentation et de recherche sur google. Je m'attendais à quelque chose comme: 

...
render: function() {
  return (
     <MyComponent classy></MyComponent>
  );
}

Est-il quelque chose comme ça possible que j'ai été absent? Est-il différent mais fonctionnellement similaire équivalent? Ou peut-être cette question montre juste qu'il me manque une partie de la "Réagir" et je ne devrait même pas envie de le faire. Merci!

  • Vous pourriez peut-être prendre un peu de recul et dites-nous quel est le problème que vous essayez de résoudre. Pourquoi voulez-vous utiliser s <div> avec un attribut au lieu d'un composant?
  • Angulaire a beaucoup de trucs que c'est uniquement dû à d'autres défauts angulaires. Attribut de classe et des directives sont nécessaires à presque tout dans angulaire, de requis de la mutabilité de la confiance sur ce que le html fournit, plutôt que de js. Ce n'est pas quelque chose que vous avez besoin de réagir.
  • Je n'ai pas de cas d'utilisation spécifiques à l'esprit, donc je suppose que cela plus d'une question d'ordre général. Je pense que l'un des avantages d'un "attribut" composant/directive est la possibilité de combiner plusieurs composant les fonctionnalités sans définir explicitement un nouveau composant. Comme un exemple, peut-être que vous avez une liste déroulante composant et le composant tooltip. Maintenant, je veux une liste déroulante qui affiche une info-bulle sur le vol stationnaire. Dans Angulaire, vous pouvez combiner ces 2 fonctionnalités sur un seul élément, c'est à dire <dropdown tooltip="help text"></dropdown>
  • Avec <MyComponent classy></MyComponent>, classy est une propriété qui n'est pas un attribut. Réagir listes blanches attributs HTML actuellement, et ce qui n'est pas dans la liste et non préfixés avec data- est passé comme une propriété à la place. À l'intérieur du composant, il peut être accédé via this.props.classy. JSX transforme classy en classy=true pour correspondre à l'effet de HTML attributs booléens.
  • C'est compréhensible, mais mon compteur serait: Est la définition d'une nouvelle directive vraiment différent, voire meilleure, que celle de la définition d'un nouveau composant?
  • Oui, nous parlons de la Décoration. Ce que nous sommes tous attendent, c'est que au lieu d'avoir <Items /> et tirez dans <ItemDecoratorA /> (comme nous l'avons ajouter des "responsabilités", nous avons ...A...B...C), ce qui pourrait être excessive pour les quelques maigres responsabilités, nous avons plutôt quelque chose le long des lignes d'un focusOn qui ne peut avoir qu'une méthode unique/gestionnaire. Au lieu de <Items /> avoir à tirer dans chaque bon décorateur -- ou maintenir la relation parent-décorateur -- nous venons de changer <ItemDecoratorABC />. à <Item a b c />. C'est une chose Angulaire cloué que comment HTML natif les noms de classe de travail-juste Décorateurs
  • Bien dit. Qui capture l'essence de ce que j'essayais de dire au-dessus de la Jordanie. "Est la définition d'une nouvelle directive vraiment différent, voire meilleure, que celle de la définition d'un nouveau composant?" - Non, bien sûr que non, mais être capable de composer de plusieurs composants des fonctionnalités en passant par la décoration (pas de créer de nouvelles "combo" de composants ou de quelque chose) est plus élégant, et quelque chose que je souhaite Réagir eu. Merci à tous pour les commentaires.
  • vous pariez. Je pense que c'est un assez grand vide dans le cadre d'un modèle ou plugin va venir. Jusqu'alors, je suis en utilisant la Méthode de Modèle de Modèle pour atténuer l'entropie dans mes applications. Quelque chose comme: method () { /* do stuff */; this._method.call(this, ...); } avec componentWillMount () { SomeDecorator.apply(this); }. Je sais que c'est un peu cryptique, mais découvrez Modèle de Méthode et vous pourriez trouver quelque chose de mieux que la façon dont je suis la mettre en œuvre.

InformationsquelleAutor ccnokes | 2015-05-23
  1. 23

    Il sera utile d'examiner ce Angulaire et Réagissent chacun à faire "derrière les coulisses."

    Dans votre Angulaire exemple, lorsque vous écrivez <div classy/></div>, vous dites "le rendu d'un élément DIV, puis attacher les comportements définis par le classy directive.

    Dans votre Réagissent exemple, lorsque vous écrivez <MyComponent classy></MyComponent>, dites-vous, "créer une instance de MyComponent et transmettre les accessoires { classy: true }. Le transpiler (Babel ou whathaveyou), elle tourne dans le code JavaScript suivant:

    React.createElement(MyComponent, { classy: true });

    Donc la réponse à votre question est que vous ne pouvez pas écrire <MyComponent classy></MyComponent> parce que MyComponent composant ne sais pas quoi faire avec le classy prop. Dans de Réagir, vous pouvez écrire quelque chose comme ceci à la place:

    class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

    Cela fonctionne parce que nous savons que le React.DOM.div composant (comme la plupart des DOM composants) sait quoi faire avec la className prop.

    Depuis Réagir 0.14 l'on peut exprimer quelque chose comme cela, plus simplement, comme un "pur" apatrides composante fonctionnelle, c'est à dire une fonction qui accepte des accessoires et renvoie le résultat du rendu:

    function AlsoClassyDiv(props) {
  const { className, ...rest } = props;
  return <div className={`${className || ''} stay-classy`} {...rest}/>;
};

    Vous pouvez voir les deux approches en action dans l'extrait de code ci-dessous.

    JS:

    class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

function AlsoClassyDiv({ className, ...props }) {
  return <div className={`${className || ''} stay-classy`} {...props}/>;
};

ReactDOM.render(
  <div id="container">
    <div>Regular div</div>
    <ClassyDiv>ClassyDiv!</ClassyDiv>
    <AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv>
  </div>,
  document.body
);

    CSS:

    .stay-classy { font: bold 3em Helvetica; text-shadow: 4px 4px 2px #aaa; }

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    • +1 pour le "dans Angulaire de vous écrire en HTML, puis Angulaire attache comportements, mais de Réagir, de vous écrire des composants...et de Réagir génère des éléments du DOM à partir d'eux". C'est une bonne explication qui illustre l'un des principes fondamentaux de Réagir et je pense que ce serait utile pour quiconque transition de l'Angulaire de Réagir. Merci!
    • "ils sont vraiment JavaScript—et de Réagir génère des éléments du DOM à partir d'eux" - Donc, fondamentalement, ils sont des composants qui représentent des éléments du DOM, mais ils ne sont pas des éléments du DOM, ils ont seulement le résultat d'éléments du DOM. Mec.. Réagir inverse de la pensée a obtenu pour vous.
    • Je n'appellerais pas cela de la haute composante de l'ordre à tous, votre exemple est tout simple spécialisation en composant parent. Haute composante de l'ordre est légèrement différente patern...
    • Il est intéressant de noter que cette réponse a été écrite avant de Réagir à 0,14. Diriez-vous que la suivante, d'un montant équivalent de Réagir 0.14 pur élément de fonction, est HOC? const ClassyDiv = props => <div className={`${props.className || ''} stay-classy`}/>;
    • Pour être clair, je me demande sincèrement. Je pense que vous avez raison, ma réponse est un peu confus à l'égard de HOCs, donc si vous avez des suggestions sur la façon de l'améliorer, je l'apprécierais. Puis-je préciser les bits sur HOCs ou devrais-je omettre entièrement?
    • Dans angulaire, vous pouvez joindre plusieurs directives sur les éléments, est-ce possible de réagir? par exemple <div draggableEl="" highlightOnMouseDown trackOnEvent="cliquez sur">Glisser-moi!</div>

    InformationsquelleAutor Jordan Running
  2. 4

    Une façon pour vous de mettre en œuvre un comportement similaire est à l'aide de Réagir classe mixin

    • Sonne comme Mixin sont sur leur chemin-mais (+1) pour dire ce que personne d'autre n'a même jeté un coup d'oeil sur.
    InformationsquelleAutor Alon Burg
  3. 4

    Un excellent exemple d'un utile directive angulaire est 

    <a href="#target" class="smooth-scroll">Target</a>

    La smoothScroll directive permettrait d'intercepter l'événement click puis l'utilisation de défilement de la fenêtre ou jquery scrollTo d'appliquer toutes sortes d'animation.

    N'importe où dans le code html on pourrait puis il suffit d'utiliser la directive alimenté nom de la classe.

    Ce genre de chose n'est pas disponible à Réagir. De le faire à Réagir vous devez créer un lien spécial composant à utiliser au lieu de:

    <a> like ASmooth....
    • Alors que je suis d'accord avec vous sur "la faire De Réagir vous devez créer un lien spécial composant", dans Angulaire(/JS), vous devrez créer un attribut spécial de la directive pour fixer ce problème à votre point d'ancrage de l'élément. Dans le même temps, votre nouvellement créé de Réagir lien composant peut rendre un point d'ancrage de l'élément à la fin, avec le même comportement attaché à elle. À la fin, nous obtenons le même résultat, les pommes de terre les pommes de terre.
    • Le point de l'ensemble des directives est la composabilité. D'abord: vous pouvez appliquer une directive à l'un des composants, même les composants inclus dans les autres bibliothèques. Deuxièmement: vous pouvez appliquer plusieurs directives pour le même composant. Les Directives sont des décorateurs, donc ce n'est pas la même chose.
    InformationsquelleAutor Bo Lora
  4. 1

    Vois mon ami que je n'avais pas bien, mais c'est une longue histoire courte, angularJS directives est en fait un composant. Donc, l'idée derrière angularJs directive est de créer un composant qui a son propre champ de données et c'est une méthode propre à opérer sur elle. Je pensais la même manière que vous avez fait et trouvé votre post ici et je ne pouvais pas trouver une réponse à cela. Mais merci pour le travail de l'expérience, j'ai pensé à ce sujet et savoir comment le faire.

    Je voulais ajouter un bouton modifier pour chaque lien d'un élément dans une liste pour faire basculer le formulaire d'édition pour chaque une seule de sorte que chaque ListItem devrait être autonome de composants, de cette façon j'ai autonome de l'état pour chacun d'eux et je bascule sur & off.

    Quel est le Réagissent équivalent d'un Angulaire de la directive qui ne fonctionne que sur les attributs?

    InformationsquelleAutor Mohammed Ramadan