[关闭]
@2890594972 2018-05-04T04:36:01.000000Z 字数 1061 阅读 662

react props

react

react props

说明
props用来传值, state用来维护数据

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>props 和 state组合使用</title>
  6.     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  7.     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
  8.     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="example">
  13.     </div>
  14.     <script type="text/babel">
  15.     var WebSite = React.createClass({
  16.       getInitialState: function() {
  17.         return {
  18.           name: "菜鸟教程",
  19.           site: "http://www.runoob.com"
  20.         };
  21.       },
  22.      handleClick: function(){
  23.         this.setState({
  24.             name: '大象课堂',
  25.             site: 'www.daxiangclass.com'
  26.         })
  27.      },
  28.       render: function() {
  29.         return (
  30.           <div>
  31.             <h2>props用来传值, state用来维护数据</h2>
  32.             <button onClick={this.handleClick}>clickMe</button>
  33.             <Name name={this.state.name} />
  34.             <Link site={this.state.site} />
  35.           </div>
  36.         );
  37.       }
  38.     });
  40.     var Name = React.createClass({
  41.       render: function() {
  42.         return (
  43.           <h1>{this.props.name}</h1>
  44.         );
  45.       }
  46.     });
  48.     var Link = React.createClass({
  49.       render: function() {
  50.         return (
  51.           <a href={this.props.site}>
  52.             {this.props.site}
  53.           </a>
  54.         );
  55.       }
  56.     });
  58.     ReactDOM.render(
  59.       <WebSite />,
  60.       document.getElementById('example')
  61.     );
  62.     </script>
  63.   </body>
  64. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注