组件的使用 和 嵌套

https://www.bilibili.com/video/BV1dP4y1c7qd?p=8&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea

 

类组件

01-class组件.js

import React from 'react'

class App extends React.Component{
    render(){
        return <div>hello react Component</div>
    }
}

export default App;

 

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './01-base/01-class组件'

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

 

效果

 

注意 render 里面的html 最外层要用一个标签包裹,如果想换行整理格式要用()去包裹

import React from 'react'


class App extends React.Component{
    render(){
        return (
        <div>hello react Component<div>hello react Component</div></div>
        )
    }
}

export default App;

 

函数式组件

02-class组件.js

function App(){
    return (
        <div>hello react Component<div>hello react Component</div></div>
        )
}
export default App;

其他和上面一样，组件的写法变了，组件不需要引入那么多东西

 

组件嵌套

// 组件嵌套
import React from 'react'


//组件
// Es6箭头函数写法----这里有个Es6写法 第二次看都直接忽略了
const NavbarSon = () => <div>我是Navbar组件的儿子</div>

// 上面的等同与下面的函数组件写法
// function NavbarSon() {
//     return (
//         <div>
//             我是Navbar组件的儿子
//         </div>
//     )
// }

// 上面的等同与下面的类组件写法
// class NavbarSon extends React.Component{
//     render(){
//         return (
//         <div>
//             我是Navbar组件的儿子
//         </div>
//         )
//     }

// }

// 组件
class Navbar extends React.Component {
    render() {
        return (
            <div>
                我是Navbar组件
                <NavbarSon></NavbarSon>
            </div>
        )
    }

}


// 组件
class Swiper extends React.Component {
    render() {
        return (
            <div>
                我是Swiper组件
            </div>
        )
    }

}


export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navbar></Navbar>
                <Swiper></Swiper>
            </div>
        )
    }
}

效果