<!DOCTYPE html><html> <head>...
<!DOCTYPE html><html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"></script> <script src="../build_0.13/react-with-addons.min.js"></script> <style type="text/css"> .example-enter{color:red;} .example-active{color:green;} </style> </head> <body> <div id="example" ></div> <script type="text/jsx"> var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 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"> {items} </ReactCSSTransitionGroup> </div> ); } }); //将组件加到对应的元素上 React.render( <TodoList />, document.getElementById('example') ); </script> </body></html>
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：初入编程 下一篇：SpringMVC注解之@JsonView
