Transizioni reactjs - Perché questo non funziona?
-
20-12-2019 - |
Domanda
Mi piacerebbe passare a un elemento in quanto modifica in un altro elemento.
Ho 3 esempi:
- .
- uno che funziona, ma usa un elenco di oggetti che vengono tenuti in giro (jsfiddle) .
- uno che non funziona, e mantiene solo un oggetto in giro, a seconda dello stato (jsfiddle)
- un altro che non funziona, che mantiene entrambi gli oggetti intorno e si nasconde / mostrali (jsfiddle usando hide / Mostra)
Quello che voglio è più simile al secondo, che è una leggera variazione del primo tentativo che funziona.
Opzione 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);
.
Opzione 2: JSX che non funziona, ma è più vicino a quello che mi piacerebbe fare (davvero, nascondere una vista e mostrare un altro)
/** @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);
.
Opzione 3: Utilizza Nascondi / Mostra per mantenere i 2 punti di vista, ma ancora non funziona.
/** @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);
.
COSÌ LUNGO STORIA - Come posso effettuare un'esecuzione di transizione sul passaggio da un "componente" principale all'altro? Non capisco perché opzione 1 funziona, ma opzione 2 no!
Soluzione
React sta solo cambiando il contenuto del DOM perché è tutto ciò che è cambiato.Dare agli elementi I tasti unici per farli animare.
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
.
Altri suggerimenti
Ho usato Michelle Treys Risposta per risolvere un problema simile utilizzando il router react-router (1.0.1).Non è chiaro dall'aPI che la chiave è necessaria.Stavo seguendo il suggerimento dei router-router per rendere i percorsi per bambini in un genitore come segue:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
.
Tuttavia il componentWillenter ha solo attivato il carico della pagina.Seguendo la soluzione di Michelle, ho clonato a figli secondo il router react-router e aggiungeva una chiave come segue:
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>
);
}
.
Grazie per la correzione.Saluti