ReactJS 转换 - 为什么这不起作用？

Question

我想在一个元素变为另一个元素时进行过渡。

我有三个例子:

• 一个工作，但使用一个项目的列表，保持周围(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:使用hide/show来保留两个视图，但仍然不起作用

/** @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不行!

Answer 1

React只是改变了DOM的内容，因为这就是改变的全部。给元素唯一的键，使他们动画。

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

JSFiddle

Answer 2

我使用Michelle Treys的答案来解决一个类似的问题，使用React-Router(1.0.1)。从api中不清楚是否需要这个键。我遵循react -路由器的建议，在父节点中呈现路由的子节点，如下所示:

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

然而，componentWillEnter仅在页面加载时触发。根据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>
    );
  }

谢谢你的修复。欢呼声