Transitions de ReactJS - Pourquoi cela ne fonctionne-t-il pas?
-
20-12-2019 - |
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.
/** @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);
/** @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);
/** @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!
La solution
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>
}
Autres conseils
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