ReactJS Переходы - Почему эта работа не работает?
-
20-12-2019 - |
Вопрос
Я хотел бы перейти на один элемент, поскольку он меняется в другой элемент.
У меня есть 3 примера:
- .
- Тот, который работает, но использует список предметов, которые содержатся вокруг (jsfiddle)
- тот, который не работает, и только держит один предмет вокруг, в зависимости от состояния (jsfiddle)
- Другой, который не работает, это сохраняет свои предметы и скрыты / показывает их (jsfiddle с использованием скрытия / Показать)
Что я хочу больше похоже на вторую, что является очень незначительным вариантом первой попытки, которая работает.
<Сильные> Вариант 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);
.
<Сильные> Вариант 2: JSX, который не работает, но ближе к тому, что я хотел бы сделать (на самом деле, скрыть одно представление и показать другое)
/** @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);
.
<Сильные> Вариант 3: Использует Скрыть / шоу, чтобы сохранить 2 мнения, но все равно не работает.
/** @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);
.
Так что длинная история коротко - как я могу сделать переход, выполнивший на переключение с одного главного «компонента» на другой? Я не понимаю, почему вариант 1 работает, но вариант 2 не!
Решение
Реагирование просто меняет содержание дома, потому что это все, что изменилось.Дайте элементам уникальные ключи, чтобы сделать их анимацией.
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
.
Другие советы
Я использовал Michelle Treys Review, чтобы решить аналогичную проблему с использованием React-Router (1.0.1).Это не ясно из API, что ключ необходим.Я следовал следующим рекомендациям React-Router, чтобы сделать маршруты детей в родительском языке следующим образом:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
.
Однако компонентWillenter срабатывает только на странице нагрузки.После решения Мишель я клонировал детей в соответствии с обновлениями реагирования и добавил ключ следующим образом:
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>
);
}
.
Спасибо за исправление.Ура