Transitions de ReactJS - Pourquoi cela ne fonctionne-t-il pas?

Question

J'aimerais transmettre un élément car il passe à un autre élément.

J'ai 3 exemples:

• un qui fonctionne, mais utilise une liste d'éléments qui sont conservés (Jsfiddle)
• un> une qui ne fonctionne pas et ne conserve qu'un élément, en fonction de l'état (Jsfiddle)
• Un autre qui ne fonctionne pas, qui maintient les éléments autour et les peaux / les montre (jsfiddle à l'aide de masquer / Afficher)

Ce que je veux, c'est plus comme le second, qui est une très légère variation de la première tentative qui fonctionne.

Option 1:

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems =
      this.state.items.concat([prompt('Enter some text')]);
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items;
    newItems.splice(i, 1)
    this.setState({items: newItems});
    },

    render: function() {
        var items = this.state.items.map(function(item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));

        return (
            <div>
                <div><button onClick={this.handleAdd} /></div>
                <ReactTransitionGroup transitionName="example">
                    {items}
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<TodoList />, document.body);

Option 2: JSX qui ne fonctionne pas, mais est plus proche de ce que j'aimerais faire (vraiment, cacher une vue et montrer un autre)

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var Test = React.createClass({
  getInitialState: function() {
    return {showOne:true}
  },
  onClick: function() {
    this.setState({showOne:! this.state.showOne});
  },
    render: function() {
      var result;
      if (this.state.showOne)
      {
        result = <div ref="a">One</div>
      }
      else 
      {
        result = <div ref="a">Two</div>
      }

        return (
            <div>
                <div><button onClick={this.onClick}>switch state</button></div>
                <ReactTransitionGroup transitionName="example">
                    {result}
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<Test />, document.body);

option 3: Utilise masquer / montrer pour garder les 2 vues autour, mais ne fonctionne toujours pas.

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var Test = React.createClass({
  getInitialState: function() {
    return {showOne:true}
  },
  onClick: function() {
    this.setState({showOne:! this.state.showOne});
  },
    render: function() {
      var result;
      var c1 = this.state.showOne ? "hide" : "show";
      var c2 = this.state.showOne ? "show" : "hide";


      return (
            <div>
                <div><button onClick={this.onClick}>switch state</button></div>
                <ReactTransitionGroup transitionName="example">
        <div className={c1}>One</div>
        <div className={c2}>Two</div>
                </ReactTransitionGroup>
            </div>
        );
    }
});

var app = React.renderComponent(<Test />, document.body);

Tant de la telle histoire courte - Comment puis-je effectuer une transition exécuter sur la commutation d'un "composant" principal à un autre? Je ne comprends pas pourquoi l'option 1 fonctionne, mais l'option 2 ne le fait pas!

Answer 1

réagir consiste simplement à changer le contenu du DOM car c'est tout ce qui a changé.Donnez aux éléments des clés uniques pour les faire animer.

  if (this.state.showOne)
  {
    result = <div key="one">One</div>
  }
  else 
  {
    result = <div key="two">Two</div>
  }

jsfiddle

Answer 2

J'ai utilisé Michelle Treys Répondez pour résoudre un problème similaire à l'aide de ROCT-ROUTER (1.0.1).Ce n'est pas clair de l'API que la clé est nécessaire.Je suivais la suggestion des routeurs réactifs pour rendre les enfants des enfants dans un parent comme suit:

render() {
    return (
        <div id='app-wrapper'>
          <ReactTransitionGroup component='div' className='transition-wrapper'>
            {this.props.children}
          </ReactTransitionGroup>
        </div>
    );
  }

Cependant, le composantWillenter est déclenché uniquement sur la charge de la page.Après la solution de Michelle, j'ai cloné des enfants conformément aux mises à jour de réacteur-routeur et ajouté une clé comme suit:

render() {

    const { location } = this.props;

    return (
        <div id='app-wrapper'>
          <ReactTransitionGroup component='div' className='transition-wrapper'>
            {React.cloneElement(this.props.children, {
              key: location.pathname,
            })}
          </ReactTransitionGroup>
        </div>
    );
  }

Merci pour le correctif.Acclamations