05-jsx-{}数组自动展开.html

 <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
    var arr=[
      <h2>hello</h2>,
      <h2>world</h2>,
      <h2>aa</h2>,
    ] 
    //{}有把数组展开得作用
   const el=<div>{arr}</div>
   //如果el=({arr})就不可以，jsx只能有一个顶层元素 
   //将el指定得元素渲染到id为root上
   ReactDOM.render(el,document.getElementById('root'))

  </script> 

 

06-列表渲染-for.html

<div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">


    var arr = ['aaa','nnnn','ccc']
    //此时展开是没有标签得，希望套上标签
    // const el=(<div>{arr}</div>)
    
    // var h2s=[]
    // for(var i=0;i<arr.length;i++){
    //   h2s.push(<h2>{arr[i]}</h2>)
    //   //arr[i]要加{}，否则不是变量，会显示3个arr[i]
    //   // h2s.push(<h2>arr[i]</h2>)
    // }


    var h2s=arr.map(function(curVal,index){
      return <h2>{curVal}</h2>
    })
    //{}是支持map语句得，for循环是不支持得
    const el=(<div>{h2s}</div>)

    ReactDOM.render(el,document.getElementById('root'))
  
  </script>

07-列表渲染-map.html

<div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">


    var arr = ['aaa','nnnn','ccc']

    var h2s=
    //{}是支持map语句得，for循环是不支持得
    //要加key
    const el=(<div>{arr.map(function(curVal,index){
      return <h2 key={index}>{curVal}</h2>
    })}</div>)

    ReactDOM.render(el,document.getElementById('root'))
  
  </script>

09-设置事件.html

<!-- html中得onclick属性设置点击事件得方式
    onclick=show()  //事件属性名全小写，赋值为函数调用
    html中属性都是用''赋值  例如'show()'
    jsx中不能用''赋值,且不能加（）
  -->
  <button onclick="show()">外部按钮</button>
  <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
    function show(ev){
      //参数为事件对象
      console.log(ev)
      alert('aaaa')
    }
    //需求是点按钮弹出a
    /*
    JSX设置事件：
        元素属性得事件名要驼峰命名，如onClick，
        事件函数赋值时用{}函数对象，如{show},不是函数调用,如{show()}

    
    */
    ReactDOM.render((<div><button onClick={show}>按钮</button></div>),document.getElementById('root'))
  
  </script>

10-设置事件-传参.html

<div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
    function show(param){
      //参数为事件对象
      console.log(param)
      console.log(this)//show.bind(this,'hello') 此时this为undefined 即不是button 也不是window,要指向window就把this改为window
      alert('aaaa')
    }
    //需求是点按钮弹出a
    /*
    JSX设置事件：
        元素属性得事件名要驼峰命名，如onClick，
        事件函数赋值时用{}函数对象，如{show},不是函数调用,如{show()}
        JSX中给事件属性赋值时一定时函数对象

        //bind方法用于改变函数得this,第二，三。。。个参数为传递给函数得实参，返回值为函数本身
        show.bind(this,'hello')//这个返回值是函数本身

        show.apply(this,['aaaa']);
        show.call(this,'aaa')//函数return 后得结果
    */
    ReactDOM.render((<div>
                {/*当前访问得this为undefined，既要传参又要拿事件源怎么办？*/}
                <button onClick={show.bind(this,'hello')}>按钮</button>
                </div>),document.getElementById('root'))
  
  </script>

show.bind(this,'hello')//这个返回值是函数本身 call和apply直接执行函数

 

11-设置事件-传参又有事件源.html

<!-- html中得onclick属性设置点击事件得方式
    onclick=show()  //事件属性名全小写，赋值为函数调用
    html中属性都是用''赋值  例如'show()'
    jsx中不能用''赋值,且不能加（）
  -->
  <button onclick="show()">外部按钮</button>
  <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
    function show(ev,param){
      console.log(ev)//事件对象
      console.log(param)//事件调用时传递得参数
      console.log(this)//
      alert('aaaa')
    }
    /*
    JSX设置事件：
        元素属性得事件名要驼峰命名，如onClick，
        事件函数赋值时用{}函数对象，如{show},不是函数调用,如{show()}
        JSX中给事件属性赋值时一定时函数对象

        //bind方法用于改变函数得this,第二，三。。。个参数为传递给函数得实参，返回值为函数本身
        show.bind(this,'hello')//这个返回值是函数本身

        show.apply(this,['aaaa']);
        show.call(this,'aaa')//函数return 后得结果
    */
    ReactDOM.render((<div>
                    {/*当前访问得this为undefined*/}
                    <button onClick={ev=>show(ev,'hello')}>按钮</button>
                    <button onClick={ev=>show.bind(this,ev,'hello2')()}>按钮2</button>
                </div>),document.getElementById('root'))
  
  </script>

 

 

11-设置事件-传参又有事件源-另一种写法.html

<body>
  <!-- html中得onclick属性设置点击事件得方式
    onclick=show()  //事件属性名全小写，赋值为函数调用
    html中属性都是用''赋值  例如'show()'
    jsx中不能用''赋值,且不能加（）
  -->
  <!-- <button onclick="show()">外部按钮</button> -->
  <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
  
    var  show=(param)=>(ev)=>{
    
        console.log(param)//'hello2'
        console.log(ev)//事件源
        console.log(this)//undefined
    }
    // var show=(param)=>{

    //   console.log(param)
    //   console.log(this)

    //   return (ev)=>{
    //     console.log(param)
    //   console.log(ev)
    //   console.log(this)

    //   }
    // }
    /*
    JSX设置事件：
        元素属性得事件名要驼峰命名，如onClick，
        事件函数赋值时用{}函数对象，如{show},不是函数调用,如{show()}
        JSX中给事件属性赋值时一定时函数对象

        //bind方法用于改变函数得this,第二，三。。。个参数为传递给函数得实参，返回值为函数本身
        show.bind(this,'hello')//这个返回值是函数本身

        show.apply(this,['aaaa']);
        show.call(this,'aaa')//函数return 后得结果
    */
    ReactDOM.render((<div>
                    {/*当前访问得this为undefined*/}
                    <button onClick={ev=>show(ev,'hello')}>按钮</button>
                    <button onClick={show('hello2')}>按钮2</button>
                </div>),document.getElementById('root'))
  
  </script>
  
</body>