[JavaScript知识库]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>