標籤:
一、
二、代碼
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello, World</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>10 <script type="text/jsx">11 var style = {12 color: "red",13 border: "1px #000 solid",14 };15 var HelloWorld = React.createClass({16 render: function () { 17 return <p>Hello, {this.props.name}</p>;18 },19 });20 var HelloUniverse = React.createClass({21 getInitialState: function () {22 return {23 name: ‘Tim‘,24 };25 },26 handleChange: function (event) { 27 this.setState({name: event.target.value});28 },29 render: function () {30 return <div>31 <HelloWorld name={this.state.name}></HelloWorld>32 <br/>33 <input type="text" onChange={this.handleChange} />34 </div>35 },36 });37 React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);38 </script>39 </body>40 </html>
React狀態的含義和用法