React組件

註冊組件

1. const 註冊組件：箭頭函數

const AwesomeHeader = () => {
    return (
        <h1>用const註冊組件</h1>
    )
}
複製代碼

2. class 註冊組件：從React.Component裏繼承

class AwesomeContent extends React.Component {
    // 須要在render方法裏去return 我們要渲染的內容
    render () {
        return (
            <div>使用語法糖註冊組件</div>
            <Fragment>使用語法糖註冊組件</Fragment>
        )
    }
}
複製代碼

注意點： 組件每一個單詞首字母必須大寫； Fragment是react 16以後新增的組件，用它包裹就不會產生多餘的DOM元素； return裏面是JSX，外層必須有根元素包裹；

組件的調用

ReactDOM.render(
    //調用時外層需包一個根元素，或者使用Fragment包裹
    <div className="app">
        //當組件裏面沒有內容是建議使用空元素，推薦使用自閉合
        <AwesomeHeader/>,
        <AwesomeContent/>
    </div>
)
複製代碼

關於JSX

在render方法中的return內部是JSX，因此在JSX裏面若是想寫JS的代碼，必須加上 「{}」

{/*若是想在return中寫註釋或者其餘JS代碼，必須在外層加上 「{}」 */}
複製代碼

組件嵌套

若是你想在組件中插入其餘內容，這時就須要組件嵌套，否則插入的內容將沒法顯示

// react dom裏提供了一個render方法，用於渲染JSX（javascriptxml）組件或者元素
ReactDOM.render(
    <div className="app">
        <AwesomeHeader>我想在這裏顯示內容，可是他不會出來<AwesomeHeader/>
    </div>
)
複製代碼

react的特殊props，表示組件的子元素，因爲使用繼承的方式註冊組件，可用this.props來獲取

1. class註冊的組件：使用{this.props.children}來註冊子組件

class AwesomeContent extends React.Component {
    console.log(this.props)
    render (){
        return (
            <div>
            {/* react裏props.children是一種特殊的props，就表示一個組件的子元素 */}
            {/* 因爲我們使用的是繼承的方式來寫組件，因此，這裏得用this.props來獲取 */}
                <h1>{this.props.children}</h1>
            </div>
        )
    }
}
複製代碼

2. 箭頭函數註冊的組件：{props.children}

const AwesomeHeader = (props) => {
    console.log(props)
    cosnt headerText = 'awesome react'
    return (
        <h1>{headerText}-{props.children}</h1>
    )
}
複製代碼

組件傳參

父組件調用子組件，若是想在子組件裏面傳參，可直接在父組件調用子組件的地方寫上屬性，屬性除了字符串都要加上 「{}」 ，子組件可經過 「props.屬性名」 來訪問

<AwesomeHeader
headerText="Hello World"
loginFn{()=>{
    console.log('方法')
}}
/>
複製代碼

AwesomeHeader是一個函數式的組件，因此能夠在內部經過props.屬性名來訪問

工程化思想

通常會在src文件夾中新建一個components專門放組件的js文件，相似這樣，快捷鍵：rcc

//首先引入React和他的Component方法
import React, { Component } from 'react'
//再將class定義的這一整段組件export出去
export default class AwesomeContent extends Component {
  render() {
    console.log(this.props)
    return (   
      <div>
        {/* react裏props.children是一種特殊的props，就表示一個組件的子元素 */}
        {/* 因爲我們使用的是繼承的方式來寫組件，因此，這裏得用this.props來獲取 */}
        <h4>{this.props.children}</h4>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur temporibus libero minima dolorem, rerum nulla similique reprehenderit est et reiciendis possimus delectus atque sint velit quas, laboriosam repellat quos ratione!
      </div>
    )
  }
}
複製代碼

components裏面還有一個index.js專門管理組件

//第一種引入方式
import AwesomeHeader from './AwesomeHeader'
import AwesomeContent from './AwesomeContent'

export {
   AwesomeHeader,
   AwesomeContent
}

//第二種引入方式
export { default as AwesomeHeader } from './AwesomeHeader'
export { default as AwesomeContent } from './AwesomeContent'
複製代碼

接着src中新建一個App.js，在這裏面統一import組件

//首先引入React和他的Component方法
import React, { Component, Fragment } from 'react';
//贊成引入組件
import {
  AwesomeHeader,
  AwesomeContent
} from './components'

//並導出App父組件
export default class App extends Component {
  render() {
    return (
      <Fragment>
        {/* App是父組件，在調用AwesomeHeader這個組件的時候，AwesomeHeader就是App的子組件， 因此想要傳遞參數，直接在子組件調用的地方寫屬性, 屬性除了字符串之外，都要用{} */}
        {/* AwesomeHeader是一個函數式的組件，因此能夠在內部經過props.屬性名來訪問 */}
        <AwesomeHeader
          headerText="Niubility React"
          logFn={() => {
            console.log('從app傳過來的方法')
          }}
        />
         <AwesomeHeader
          headerText="Awesome means Niubility"
          logFn={() => {
            console.log('從app傳過來的方法')
          }}
        />
        <AwesomeContent><div>awesome content 1</div></AwesomeContent>
      </Fragment>
    )
  }
}
複製代碼

再將App.js傳入index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
  <App />,
  document.querySelector('#app')
)
複製代碼