react 组件

React.createElement()

    <div id="app"></div>
    <script type="text/babel">
        // console.log(React)
        // console.log(ReactDOM)
        // var html1 = <div className="react">hello world</div>
        var html1 = React.createElement("div",{
            className:'react',
            id:'reactid'
        },'hello word')
        console.log(html1)
        ReactDOM.render(html1,document.getElementById("app"))
    </script>

React.createElement()他就是jsx语法编译的结果，这个函数的返回值是一个Virtual DOM(虚拟对象)

定义组件

• 类组件 ：   关键字 class 定义的组件

    var classes = "react"
    var id = 'web'
    class Person extends React.Component{
        render(){
            return <div className={classes} id={id}>hello word</div>
        }
    }
    ReactDOM.render(<Person/>,document.getElementById("app"))

• 函数组件 ：关键字 function 定义的组件

    var classes = "react"
    var id = 'web'
    function Student(){
        return <h1 className={classes} id={id}> hello web</h1>
    }
    ReactDOM.render(<Student/> ,document.getElementById("app"))

注意

• 组件名的首字母必须大写, 首字母大小写是react区分组件和普通标签的方法

• 组件中 返回的jsx代码必须有一个顶层标签

组件嵌套

父组件嵌套一个子组件

        class Son extends React.Component{
            render(){
                return <div ><span>这是子组件</span></div>
            }
        }
        class Father extends React.Component{
            render(){
                return <div ><h3>这是父组件</h3> <Son></Son></div>   
            }
        }
        ReactDOM.render(<Father/>,document.getElementById("app"))

注意:组件当作标签使用的时候，必须是闭合标签。但标签<Son/> 双标签 <Son></Son>

jsx 循环

    <script type="text/babel">
        var arrs = [
            {'id':1,'name':'张三','age':15,"sex":'男'},
            {'id':2,'name':'李四','age':25,"sex":'女'},
            {'id':3,'name':'王五','age':20,"sex":'男'},
            {'id':4,'name':'赵六','age':18,"sex":'女'},
            {'id':5,'name':'小明','age':17,"sex":'男'},
        ]
        class Person extends React.Component{
            render(){
                return <div>
                        <ul>
                        {
                             arrs.map(function(p,index){
                                return <li key={index}>{p.name},{p.age},{p.sex}</li>
                            })
                        }
                            </ul>
                    </div>
            }
        }    
        ReactDOM.render(<Person/>,document.getElementById("app"))
    </script>

map 方法，不要使用 for 循环

jsx 事件

定义在外部

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
    function fn(){ 
        console.log('hello react') 
    } 
    class Person extends React.Component{ 
        render(){ 
            return <div> <button onClick={fn}> jsx 事件</button></div>
        } 
    }
    ReactDOM.render( <Person/>,document.getElementById("app"))
</script>

定义在内部 

    class Person extends React.Component{ 
        fn(){
            console.log('hello web ')
        }
        render(){ 
            console.log(this)
            return <div> <button onClick={this.fn}> jsx 事件</button></div>
        } 
    }
    ReactDOM.render( <Person/>,document.getElementById("app"))

this指向。实例对象

jsx 事件 传参

默认携带一个参数       事件对象

    class Person extends React.Component{ 
        fn(e){
            console.log(e)
        }
        render(){ 
            console.log(this)
            return <div> <button onClick={this.fn}> jsx 事件</button></div>
        } 
    }
    ReactDOM.render( <Person/>,document.getElementById("app"))

 通过箭头函传递自定义参数

   class Person extends React.Component{ 
        fn(a,e){
            console.log(a,e)
        }
        render(){ 
            console.log(this)
            return <div> <button onClick={(e)=>{this.fn('react',e)}}> jsx 事件</button></div>
        } 
    }
    ReactDOM.render( <Person/>,document.getElementById("app"))

 第一个参数是 自定义参数，第二个参数是事件对象

 通过bind 绑定参数

 

    class Person extends React.Component{ 
        fn(a,e){
            console.log(a,e)
        }
        render(){ 
            console.log(this)
            return <div> <button onClick={this.fn.bind(null,'web')}> jsx 事件</button></div>
        } 
    }
    ReactDOM.render( <Person/>,document.getElementById("app"))

this.fn.bind(null,'web'). null是不修改内部的this  web是自定义参数。e是默认参数。事件对象