Reactjs不需要定义

时间:2015-11-24 17:29:51

标签: reactjs

我承认我是ReactJS的新手,但我遇到了一个非常奇怪的问题。我正在做动作的第一部分动作反应https://facebook.github.io/react/docs/animation.html并且我总是有一个“未捕获的ReferenceError:require未定义”。请帮助下面是我的整个代码:

<html>
  <head>
    <meta charset="utf-8" />
    <title>Django React Personal Project</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
<script type="text/babel">
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

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>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

ReactDOM.render(
    <TodoList />,
    document.getElementById('content')
);
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

Use the react-with-addons bundle如果您想通过<script>代码使用插件。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;