第三关：组件嵌套及样式

快速构建组件框架快捷键

• 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>
    )
  }
}

// 函数组件
function Products () {
  return <div>Products</div>
}

// 箭头函数组件
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表达式

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> 
    )
  }
}

行内样式写法

• 注意：
  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> 标签中的 for ，改为 htmlFor
  3. 导入 css文件需要添加 .css 后缀

1. 创建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> 
    )
  }
}

• 效果

  
  
  展示效果