css-transitions - Comment créer une Réagir Modal(qui est à ajouter à la " <body>") avec des transitions?

63

À réagir conf 2015, Ryan Florence démontré à l'aide de portails. Voici comment vous pouvez créer une simple Portal composant...
```
var Portal = React.createClass({
  render: () => null,
  portalElement: null,
  componentDidMount() {
    var p = this.props.portalId && document.getElementById(this.props.portalId);
    if (!p) {
      var p = document.createElement('div');
      p.id = this.props.portalId;
      document.body.appendChild(p);
    }
    this.portalElement = p;
    this.componentDidUpdate();
  },
  componentWillUnmount() {
    document.body.removeChild(this.portalElement);
  },
  componentDidUpdate() {
    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
  }
});
```
et puis tout ce que vous pouvez normalement faire Réagir, vous pouvez le faire à l'intérieur du portail...
```
    <Portal className="DialogGroup">
       <ReactCSSTransitionGroup transitionName="Dialog-anim">
         { activeDialog === 1 && 
            <div key="0" className="Dialog">
              This is an animated dialog
            </div> }
       </ReactCSSTransitionGroup>
    </Portal> 
```
jsbin démo

Vous pouvez également jeter un oeil à Ryan réagir-modal, bien que je n'ai pas réellement utilisé donc je ne sais pas comment cela fonctionne bien avec l'animation.
- Voici quelques en savoir plus sur le sujet. Une autre option pourrait être d'utiliser react-motion.
- Il y a également un composant autonome pour ceci: github.com/cloudflare/react-gateway
- C'est une bonne solution, mais ne fonctionne pas si vous utilisez le contexte. C'est un problème avec de nombreux libs comme redux et react-intl.
- Je pense que nous avons aussi besoin d'un ReactDOM.unmountComponentAtNode(this.portalElement) dans componentWillUnmount, non? Sinon, le Réagir arbre vit encore dans la mémoire. C'est aussi dans la react-modal source github.com/reactjs/react-modal/blob/master/lib/components/....
- obtenir de l'erreur non interceptée, ne peut pas trouver l'élément d'id ... j'ai trouvé, c'est parce que c'est à l'aide de Réagir à rendre. Il devrait être ReactDOM à la place.
InformationsquelleAutor Gil Birman
30

J'ai écrit le module réagir-portail qui devrait vous aider.
- Ce qui! Mec, ce qui devrait être le #1 réponse.
InformationsquelleAutor tajo

Réagir 15.x

Voici un ES6 version de la méthode décrite dans cet article:

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

export default class BodyEnd extends React.PureComponent {

    static propTypes = {
        children: PropTypes.node,
    };

    componentDidMount() {
        this._popup = document.createElement('div');
        document.body.appendChild(this._popup);
        this._render();
    }

    componentDidUpdate() {
        this._render();
    }

    componentWillUnmount() {
        ReactDOM.unmountComponentAtNode(this._popup);
        document.body.removeChild(this._popup);
    }

    _render() {
        ReactDOM.render(this.props.children, this._popup);
    }

    render() {
        return null;
    }
}

Juste envelopper tous les éléments que vous voulez être à la fin du DOM avec elle:

<BodyEnd><Tooltip pos={{x,y}}>{content}</Tooltip></BodyEnd>

Réagir 16.x

Voici une version mise à jour pour Réagir 16:

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyEnd extends React.Component {

    constructor(props) {
        super(props);
        this.el = document.createElement('div');
        this.el.style.display = 'contents'; //The <div> is a necessary container for our content, but it should not affect our layout. Only works in some browsers, but generally doesn't matter since this is at the end anyway. Feel free to delete this line.
    }

    componentDidMount() {
        document.body.appendChild(this.el);
    }

    componentWillUnmount() {
        document.body.removeChild(this.el);
    }

    render() {
        return ReactDOM.createPortal(
            this.props.children,
            this.el,
        );
    }
}

Exemple de travail

grâce mpen ce qui précède est la meilleure et la plus simple de loin et travaille sur Cordova
ne fonctionne pas avec réagissent contexte :<
Essayez d'utiliser ReactDOM.createPortal à la place. Je parie que ça va marcher! (Désolé, je n'ai pas le code complet de post en ce moment)
ah, ouais, j'ai réalisé après la publication du commentaire que le lien était à une autre solution, j'ai bien le code que vous avez posté est liée à cela 🙂 serait génial si cela fonctionne, même si je serais un peu friands d'être en mesure de prétendre que les auxiliaires modaux ne sont pas bien pris en charge à Réagir, mais maintenant ils sont :< je déteste les auxiliaires modaux/popups 🙂
Haha.. ils ne sont pas si mal une fois que vous avez quelques bonnes fonctions/composants pour travailler avec eux. J'ai mis à jour le code pour Réagir 16.
Je pense qu'ils sont mauvais UX, sauf pour quelques rares invites comme "Êtes-vous sûr ..?"

InformationsquelleAutor mpen

Comme d'autres réponses ont déclaré ce qui peut être fait à l'aide de Portails. À partir de v16.0 Portails sont inclus dans Réagissent.

<body>
  <div id="root"></div>
  <div id="portal"></div>
</body>

Normalement, lorsque vous revenez à un élément à partir d'un composant de la méthode render, il est monté dans le DOM comme un enfant le plus proche du nœud parent, mais avec des portails, vous pouvez insérer un enfant dans un emplacement différent dans les DOM.

const PortalComponent = ({ children, onClose }) => {
  return createPortal(
    <div className="modal" style={modalStyle} onClick={onClose}>
      {children}
    </div>,
    //get outer DOM element
    document.getElementById("portal")
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    };
  }

  render() {
    return (
      <div style={styles}>
        <Hello name="CodeSandbox" />
        <h2>Start editing to see some magic happen {"\u2728"}</h2>
        <button onClick={() => this.setState({ modalOpen: true })}>
          Open modal
        </button>
        {this.state.modalOpen && (
          <PortalComponent onClose={() => this.setState({ modalOpen: false })}>
            <h1>This is modal content</h1>
          </PortalComponent>
        )}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Vérifier exemple de travail ici.

Le plus up-to-date de la réponse à partir de janvier 2018... ici.. est à se demander si cette question répétée est quelque chose qui devrait DONC penser à

InformationsquelleAutor Kristaps Taube

3

Le problème fondamental ici est que, dans de Réagir, vous êtes uniquement autorisé à monter un composant son parent, qui n'est pas toujours le comportement souhaité. Mais comment résoudre ce problème?

J'ai fait la solution, adressée à résoudre ce problème. Plus détaillée de la définition du problème, de la src et des exemples peuvent être trouvés ici: https://github.com/fckt/react-layer-stack#rationale
Justification

react/react-dom vient livré avec 2 hypothèses de base/idées:
- chaque UI est naturellement hiérarchique. C'est pourquoi nous avons l'idée de components de laquelle s'enroulent les uns des autres
- react-dom supports (physiquement) composant enfant à son parent DOM nœud par défaut
Le problème est que, parfois, la deuxième propriété n'est pas ce que vous voulez
dans votre cas. Parfois, vous souhaitez monter votre composant dans
physiques différents nœuds du DOM et maintenez la connexion logique entre
le parent et l'enfant en même temps.

Exemple canonique est info-bulle-comme le composant: à un certain point de
processus de développement, vous pourriez trouver que vous avez besoin d'ajouter un peu de
description de votre UI element: il va rendre fixe couche et
doit connaître ses coordonnées (qui ne sont que UI element coord ou
souris coords) et en même temps, il a besoin d'informations s'il
doit être affichée ou non, de son contenu et le contexte de
composants parent. Cet exemple montre que, parfois, hiérarchie logique
ne correspond pas avec le physique DOM hiérarchie.
Prendre un coup d'oeil à https://github.com/fckt/react-layer-stack/blob/master/README.md#real-world-usage-example voir l'exemple concret qui est la réponse à votre question:
```
import { Layer, LayerContext } from 'react-layer-stack'
//... for each `object` in array of `objects`
  const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
  return (
    <Cell {...props}>
        //the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
            hideMe, //alias for `hide(modalId)`
            index } //useful to know to set zIndex, for example
            , e) => //access to the arguments (click event data in this example)
          <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
            <ConfirmationDialog
              title={ 'Delete' }
              message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
              confirmButton={ <Button type="primary">DELETE</Button> }
              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } //hide after confirmation
              close={ hideMe } />
          </Modal> }
        </Layer>

        //this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
        <LayerContext id={ modalId }> {({showMe}) => //showMe is alias for `show(modalId)`
          <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> //additional arguments can be passed (like event)
            <Icon type="trash" />
          </div> }
        </LayerContext>
    </Cell>)
//...
```
- S'il vous plaît rendre explicite le fait que c'est votre propre bibliothèque, et merci de lire Comment offrir des personnels des bibliothèques open-source?
- "Je propose la solution, adressée à résoudre ce problème" - n'est-ce pas assez? Et ce n'est pas seulement à propos de la bibliothèque, mais plus sur le modèle, la bibliothèque est complémentaire dans ce cas
- Non, il n'est pas assez. Vous la promotion de votre propre bibliothèque de la solution proposée. Vous l'avez fait dans beaucoup d'endroits. Notre communauté considère qu'une telle promotion, sans que la divulgation soit une forme de astroturfing.
- ok, pourrions-nous convenir d'abord, que ce n'est pas clair, à peine subjective, sujet controversé? Que faire si quelqu'un écrire des réponses et des explications au lieu de moi? Comment il va changer de discours?
- btw, j'ai lu les liens que vous avez partagée, toutes les déclarations sont assez claires, justes et logiques de l'OMI. Je suis désolé aussi pour élever un tel sujet, ne pas assurer que c'est un bon endroit pour elle..
- que faire si je vais supprimer les liens à la bibliothèque? Un pouvez le supprimer de tous mes sujets, et pas une grosse affaire pour moi. Si ppl en fera la demande, j'ai pu partager avec eux en privé, pas de problème )
InformationsquelleAutor fckt
2

J'ai écrit une bibliothèque pour vous y aider. - Je éviter les DOM insertion hacks utilisé par le Portail de stratégies et de prendre plutôt l'utilisation du contexte de la base de registres pour passer le long de composants à partir d'une source vers une cible.

Ma mise en oeuvre utilisation de la norme Réagir de rendu cycles. Les composants que vous téléporter/compression/transport ne causent pas un double de rendu cycle sur la cible - tout se passe de façon synchrone.

L'API est également structuré de manière à décourager l'usage de la magie des chaînes dans votre code pour définir la source/cible. Au lieu de cela vous devez explicitement de créer et de décorer les composants qui seront utilisés comme cible (Injectable) et la source (Injecteur). Comme ce genre de chose est généralement considéré comme assez magique je pense que Composante explicite de la représentation (nécessitant des importations directes et d'utilisation) peut aider à atténuer la confusion sur l'endroit où un Composant est injecté.

Bien que ma bibliothèque ne vous permettra pas de rendre un enfant direct de ce document.corps, vous pouvez atteindre un niveau acceptable modal effet, en se liant à un niveau de la racine de la composante dans votre composant de l'arbre. J'ai l'intention d'ajouter un exemple de ce cas d'utilisation bientôt.

Voir https://github.com/ctrlplusb/react-injectables pour plus d'info.

InformationsquelleAutor ctrlplusb
1

Je pense que ce code est plus ou moins explicites et couvre la solution de base de ce que la plupart des gens sont à la recherche pour:
```
ReactDOM.render(
  <Modal />,
  document.body.appendChild( document.createElement( 'div' ) ),
)
```
InformationsquelleAutor Itay Grudev

Espère que cela aide. C'est mon actuel de la mise en œuvre d'une transition modale basée sur la réponse ci-dessus:

  React = require 'react/addons'

  keyboard = require '../util/keyboard'
  mixinLayered = require '../mixin/layered'

  $ = React.DOM
  T = React.PropTypes
  cx = React.addons.classSet

  module.exports = React.createFactory React.createClass
    displayName: 'body-modal'
    mixins: [mixinLayered]

    propTypes:
      # this components accepts children
      name:             T.string.isRequired
      title:            T.string
      onCloseClick:     T.func.isRequired
      showCornerClose:  T.bool
      show:             T.bool.isRequired

    componentDidMount: ->
      window.addEventListener 'keydown', @onWindowKeydown

    componentWillUnmount: ->
      window.removeEventListener 'keydown', @onWindowKeydown

    onWindowKeydown: (event) ->
      if event.keyCode is keyboard.esc
        @onCloseClick()

    onCloseClick: ->
      @props.onCloseClick()

    onBackdropClick: (event) ->
      unless @props.showCornerClose
        if event.target is event.currentTarget
          @onCloseClick()

    renderLayer: ->
      className = "body-modal is-for-#{@props.name}"
      $.div className: className, onClick: @onBackdropClick,
        if @props.showCornerClose
          $.a className: 'icon icon-remove', onClick: @onCloseClick
        $.div className: 'box',
          if @props.title?
            $.div className: 'title',
              $.span className: 'name', @props.title
              $.span className: 'icon icon-remove', @onCloseClick
          @props.children

    render: ->
      $.div()

InformationsquelleAutor jiyinyiyong

Vous devez vous connecter pour publier un commentaire.

jsbin démo

Réagir 15.x

Réagir 16.x

Justification

`jsbin démo`