ReactJS过渡-为什么'；这不管用吗？

我想在一个元素更改为另一个元素时转换它

我有三个例子：

我想要的更像第二个，这是第一次尝试的一个非常微小的变化

选项1:

/**@jsx React.DOM*/
var React TransitionGroup=React.addons.TransitionGroup；
var TodoList=React.createClass({
getInitialState:函数（）{
返回{items:['hello'，'world'，'click'，'me']}；
},
handleAdd:function（）{
var新项目=
this.state.items.concat（[prompt（'Enter some text'）]）；
this.setState（{items:newItems}）；
},
handleRemove:函数（i）{
var newItems=this.state.items；
新项目.拼接（i，1）
this.setState（{items:newItems}）；
},
render:function（）{
var items=this.state.items.map（函数（项，i）{
返回(
{item}
);
}.约束（这个）；
返回(
{items}
);
}
});
var app=React.renderComponent（，document.body）；

选项2: JSX不起作用，但更接近我想要做的事情（实际上，隐藏一个视图，显示另一个视图）

/**@jsx React.DOM*/
var React TransitionGroup=React.addons.TransitionGroup；
var Test=React.createClass({
getInitialState:函数（）{
返回{showOne:true}
},
onClick:function（）{
this.setState（{showOne:！this.state.showOne}）；
},
render:function（）{
var结果；
if（this.state.showOne）
{
结果=一
}
其他的
{
结果=2
}
返回(
开关状态
{result}
);
}
});
var app=React.renderComponent（，document.body）；

选项3: 使用“隐藏/显示”保留这两个视图，但仍然不起作用

/**@jsx React.DOM*/
var React TransitionGroup=React.addons.TransitionGroup；
var Test=React.createClass({
getInitialState:函数（）{
返回{showOne:true}
},
onClick:function（）{
this.setState（{showOne:！this.state.showOne}）；
},
render:function（）{
var结果；
var c1=this.state.showOne？“隐藏”：“显示”；
var c2=this.state.showOne？“显示”：“隐藏”；
返回(
开关状态
一个
两个
);
}
});
var app=React.renderComponent（，document.body）；

---

长话短说——我如何在从一个主要“组件”切换到另一个时执行转换？我不明白为什么选项1有效，但选项2无效

React只是更改DOM的内容，因为这就是更改的全部内容。为元素指定唯一的关键点，使其具有动画效果

  if (this.state.showOne)
  {
    result = <div key="one">One</div>
  }
  else 
  {
    result = <div key="two">Two</div>
  }

if（this.state.showOne）
{
结果=一
}
其他的
{
结果=2
}

---

我使用Michelle Treys answer解决了使用React路由器（1.0.1）的类似问题。api不清楚是否需要密钥。我按照以下建议在父对象中呈现一个路由子对象，如下所示：

render() {
    return (
        <div id='app-wrapper'>
          <ReactTransitionGroup component='div' className='transition-wrapper'>
            {this.props.children}
          </ReactTransitionGroup>
        </div>
    );
  }

render（）{
返回(
{this.props.children}
);
}

但是，组件将仅在页面加载时触发。按照Michelle的解决方案，我根据react路由器更新克隆了一个孩子，并添加了一个密钥，如下所示：

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>
    );
  }

render（）{
const{location}=this.props；
返回(
{React.cloneElement（this.props.children{
关键字：location.pathname，
})}
);
}

---

谢谢你的修复。干杯