React元件

十萬嬉_皮發表於2018-12-27
React元件

註冊元件

  1. const 註冊元件：箭頭函式
const AwesomeHeader = () => {
    return (
        <h1>用const註冊元件</h1>
    )
}
複製程式碼
  1. 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>
        )
    }
}
複製程式碼
  1. 箭頭函式註冊的元件：{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')
)
複製程式碼

相關文章