Reactjs过渡 - 为什么这不起作用?
-
20-12-2019 - |
题
我想在另一个元素改变时转换一个元素。
我有3个例子:
- 工作的一个,但使用一系列围绕(jsfiddle)
- 一个不起作用的,并且只能保留一个项目,取决于状态(jsfiddle)
- 另一个不起作用的人,它保留了周围的项目和隐藏/显示它们(jsfiddle使用hide /显示)
我想要的是更像是第二个,这是第一次尝试的略有变化。
选项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没有!
解决方案
反应只是改变DOM的内容,因为这完全改变了。为元素唯一键使它们变动。
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
.
其他提示
我使用Michelle Treys答案以解决类似于反应路由器(1.0.1)的类似问题。它从API中不清楚,需要关键。我正在跟随反应路由器建议,以便在父母中渲染父母的路线如下:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
.
但是,仅在页面加载时触发的组件villenter。遵循米歇尔的解决方案,我根据反应路由器更新克隆了一个孩子,并添加了一个关键如下:
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>
);
}
.
谢谢你的修复。干杯
不隶属于 StackOverflow