ReactJSの移行 - なぜこれは機能しないのですか?
-
20-12-2019 - |
質問
他の要素に変わるにつれて1つの要素を遷移させたいです。
私は3つの例を持っています:
- 1つが機能するが(jsfiddle)
- 状態(JSfiddle)に応じて、1つの項目を回避するものだけを保持します。
- 機能しないもう1つ、それはそれらを隠して隠す/表示されます(非表示を使用してjsfiddle / show)
私が望むものは2番目のもののようなもので、それは最初の試みの非常にわずかな変動です。
オプション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は、やりたいことに近いですが(実際には1つのビューを隠して別のビューを隠してください)
/** @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はしません!
解決
REATはDOMの内容を変更するだけです。アニメートを作るためのユニークなキーを要素に与えます。
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
.
他のヒント
私は、React-Router(1.0.1)を使用して同様の問題を解決するためにMichelle Treys回答を使用しました。そのキーが必要とされることがAPIから明らかではありません。私は次のように親の子の子を親にレンダリングするためにReact-Routersの提案に従っていました:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
.
しかし、ComponentWilletererはページ負荷でのみトリガされます。Michelleのソリューションに従うと、React-Routerの更新に従って子をクローニングし、次のようにキーを追加しました。
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