test.jsx 806 字节
Newer Older
M
Martin Aeschlimann 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
var ToggleText = React.createClass({
  getInitialState: function () {
    return {
      showDefault: true
    }
  },

  toggle: function (e) {
    // Prevent following the link.
    e.preventDefault();

    // Invert the chosen default.
    // This will trigger an intelligent re-render of the component.
    this.setState({ showDefault: !this.state.showDefault })
  },

  render: function () {
    // Default to the default message.
    var message = this.props.default;

    // If toggled, show the alternate message.
    if (!this.state.showDefault) {
      message = this.props.alt;
    }

    return (
      <div>
        <h1>Hello {message}!</h1>
        <a href="" onClick={this.toggle}>Toggle</a>
      </div>
    );
  }
});

React.render(<ToggleText default="World" alt="Mars" />, document.body);