如何在 onClick 事件中使用 ReactJS 淡出/淡入内容？

Question

这是我目前的代码和here is a working fiddle as well。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var FooterMenu = React.createClass({
  onClick: function (type) {
    var content;

    switch (type) {
      case 'A':
      content = <p>Etiam feugiat lorem non metus. Nulla sit amet est. Vivamus aliquet elit ac nisl. Praesent egestas tristique nibh. Morbi nec metus.
                Morbi vestibulum volutpat enim. Pellentesque posuere. Curabitur at lacus ac velit ornare lobortis. In turpis. Donec posuere vulputate arcu.                                 Donec posuere vulputate arcu. Maecenas malesuada. Ut varius tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et                                       ultrices posuere cubilia Curae; Fusce id purus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>;
      break;
      case 'B':
          content = <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc sed turpis. Duis leo. Pellentesque habitant morbi                                       tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus lacinia erat. Vestibulum purus quam, scelerisque ut,                                           mollis sed, nonummy id, metus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc nulla. Donec mollis                                            hendrerit risus. Etiam ultricies nisi vel augue. In consectetuer turpis ut velit. Vivamus aliquet elit ac nisl. In dui magna, posuere                                       eget, vestibulum et, tempor auctor, justo. Vestibulum ullamcorper mauris at ligula. Vivamus euismod mauris.</p>;
      break;
      default:
      throw new Error('Unimplemented type');
    }
    this.props.setActiveContent(content);
  },
  render: function () {
    return (
      <footer className="footer">
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <ul className="text-muted list-inline main-menu">
                <li onClick={this.onClick.bind(this, 'A')}>Menu Item A</li>
                <li onClick={this.onClick.bind(this, 'B')}>Menu Item B</li>
              </ul>
            </div>
            <div className="col-md-6">
            </div>
          </div>
        </div>
      </footer>
      );
  }
});
var MainContent = React.createClass({
  contextTypes: {
    activeContent: React.PropTypes.any
  },
  render: function () {
    return (
      <div className="container">
        <div className="row">{this.context.activeContent}</div>
      </div>
      );
  }
});
var MainContentWrapper = React.createClass({
  render: function () {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} >
        <MainContent />
      </ReactCSSTransitionGroup>
    );
  }
});
var App = React.createClass({
  getInitialState: function () {
    return {
      activeContent: <h1>Vivamus aliquet elit ac nisl</h1>
    }
  },
  childContextTypes: {
    activeContent: React.PropTypes.any
  },
  getChildContext: function () {
    return {
      activeContent: this.state.activeContent
    };
  },
  setActiveContent: function (content) {
    this.setState({activeContent: content});
    setTimeout(function(){
      this.replaceState(this.getInitialState());
    }.bind(this),60000);
  },
  render: function () {
    return (
      <div>
        <MainContentWrapper />
        <FooterMenu setActiveContent={this.setActiveContent} />
      </div>
      );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('container')
  );

我要做的就是创建一个 FadeOut/FadeIn 过渡动画来隐藏和显示要显示的选定内容。当点击 Menu Item A 或 Menu Item B 时，然后 FadeOut 显示在菜单上方的活动文本和 FadeIn新内容。

我怎样才能做到这一点？ 我是 ReactJS 的新手

Answer 1

这不是一个很好的例子，但它可以满足您的需求 (https://jsfiddle.net/jp20ey2g/7/)。

而你 should not 使用 context 作为全局变量 - 我已经清理了该部分以支持 props。

var FooterMenu = React.createClass({
  onClick: function (type) {
    var content;

    switch (type) {
      case 'A':
      content = <p>Etiam feugiat lorem non metus. Nulla sit amet est. Vivamus aliquet elit ac nisl. Praesent egestas tristique nibh. Morbi nec metus.
                Morbi vestibulum volutpat enim. Pellentesque posuere. Curabitur at lacus ac velit ornare lobortis. In turpis. Donec posuere vulputate arcu.                                 Donec posuere vulputate arcu. Maecenas malesuada. Ut varius tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et                                       ultrices posuere cubilia Curae; Fusce id purus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>;
      break;
      case 'B':
          content = <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc sed turpis. Duis leo. Pellentesque habitant morbi                                       tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus lacinia erat. Vestibulum purus quam, scelerisque ut,                                           mollis sed, nonummy id, metus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc nulla. Donec mollis                                            hendrerit risus. Etiam ultricies nisi vel augue. In consectetuer turpis ut velit. Vivamus aliquet elit ac nisl. In dui magna, posuere                                       eget, vestibulum et, tempor auctor, justo. Vestibulum ullamcorper mauris at ligula. Vivamus euismod mauris.</p>;
      break;
      default:
      throw new Error('Unimplemented type');
    }
    this.props.setActiveContent(content);
  },
  render: function () {
    return (
      <footer className="footer">
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <ul className="text-muted list-inline main-menu">
                <li onClick={this.onClick.bind(this, 'A')}>Menu Item A</li>
                <li onClick={this.onClick.bind(this, 'B')}>Menu Item B</li>
              </ul>
            </div>
            <div className="col-md-6">
            </div>
          </div>
        </div>
      </footer>
      );
  }
});
var MainContent = React.createClass({
  componentWillReceiveProps: function (nextProps) {
    if (this.props.content !== nextProps.content) {
        this.setState({ opacity: 0 })
    }
  },
  getInitialState: function () {
    return { opacity: 1 }
  },
  componentDidUpdate: function () {
    if (this.state.opacity !== 1) {
      setTimeout(() => {
        this.setState({ opacity: 1 })
      }, 200)
    }
  },
  render: function () {
    var style = {
        opacity: this.state.opacity,
      transition: this.state.opacity > 0 ? 'opacity 0.2s ease-in' : 'none'
    }
    console.log(this.state.opacity)
    return (
      <div className="container">
        <div className="row" style={style}>
            {this.props.content}
        </div>
      </div>
      );
  }
});

var App = React.createClass({
  getInitialState: function () {
    return {
      activeContent: <h1>Vivamus aliquet elit ac nisl</h1>
    }
  },
  childContextTypes: {
    activeContent: React.PropTypes.any
  },
  getChildContext: function () {
    return {
      activeContent: this.state.activeContent
    };
  },
  setActiveContent: function (content) {
    this.setState({activeContent: content});
    setTimeout(function(){
      this.replaceState(this.getInitialState());
    }.bind(this),60000);
  },
  render: function () {
    return (
      <div>
        <MainContent content={this.state.activeContent} />
        <FooterMenu setActiveContent={this.setActiveContent} />
      </div>
      );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('container')
  );

Answer 2

您可以试一试并用问题反馈 - https://facebook.github.io/react/docs/animation.html。这是相当简单的，但我花了一点时间才正确。