快速構(gòu)建組件框架快捷鍵

• rcc

• 要求：vscode下載插件 ES7+ React/Redux/React-Native snippets

  
  
  react插件

• 效果

  
  
  插件生成效果

組件的嵌套

• nestComponent.js

import React, { Component } from 'react'

// 類組件
class Swiper extends Component {
  render() {
    return (
      <div>Swiper</div>
    )
  }
}

// 函數(shù)組件
function Products () {
  return <div>Products</div>
}

// 箭頭函數(shù)組件
const Blog = () => {
  return (
    <div>Blog</div>
  )
}

export default class NestComponent extends Component {
  render() {
    return (
      <div>
      <Swiper></Swiper>
      <Products></Products>
      <Blog></Blog>
      </div>
    )
  }
}

• index.js

import React from 'react'
import {createRoot} from 'react-dom/client'

import NestComponent from './components/nestComponent'

createRoot(document.getElementById('root')).render(<NestComponent></NestComponent>)

• 效果

  
  
  組件嵌套效果

組件的樣式

{ } 大括號里面可以放 js表達(dá)式

import React, { Component } from 'react'

export default class Style extends Component {
  render() {
    return (
      <div>
        <div>{ 10 + 20 }</div>    {/* 30 */}
        <div>{ 10 > 20 ? '10' : '20' }</div> { /* 20 */ }
      </div> 
    )
  }
}

行內(nèi)樣式寫法

• 注意：
  1. css 樣式中的 - ，在jsx中需取消 “ - ” ，“ - ” 后的第一個字母大寫
  2. 樣式的屬性值要有引號 ' '

import React, { Component } from 'react'

export default class Style extends Component {
  render() {
    let name = 'zhangsan'
    let style = {backgroundColor:'#FF4b00', fontSize:'26px'}
    return (
      <div>
        <div style={ style }>{ name }</div>
        <div style={{ color:'red', fontSize:'30px' }}>{ name }</div>
      </div> 
    )
  }
}

外部引入樣式寫法

• 注意：
  1. class 類名會與 js 中的混淆，需改為className
  2. <label> 標(biāo)簽中的 for ，改為 htmlFor
  3. 導(dǎo)入 css文件需要添加 .css 后綴

1. 創(chuàng)建css文件夾

   
   
   css文件
   
   
   css 樣式

2. 引入css文件，并定義類名 className

import React, { Component } from 'react'
import './css/styleComponent.css'

export default class Style extends Component {
  render() {
    let name = 'zhangsan'
    return (
      <div>
        <div className='style'>{ name }</div>
      </div> 
    )
  }
}

• 效果

  
  
  展示效果