欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React学习-脚手架中组件和样式的使用

程序员文章站 2022-07-02 22:38:04
...

React学习-脚手架中组件和样式的使用

  • 父组件中引入子组件
import Child from './Child'
  • 父组件定义传递子组件的参数
  • 父组件定义子组件往父组件传参的函数fun
<Child fun={this.fun} title={this.state.msg}/>
  • 子组件将数据传递给父组件
this.props.fun(this.state.msg)

完整代码

App.js(父组件)

import React,{Component} from 'react';
import Child from './Child'

export default class App extends Component{
  state = {
    msg:'我是父组件的数据',
    dataChild:''
  }
  fun=(data)=>{
    this.setState({
      dataChild:data
    })
  }
  render(){
    return(
      <div>
        <h1>我是父组件</h1>
        <Child fun={this.fun} title={this.state.msg}/>
        <p>子组件传递过来的数据是:{this.state.dataChild}</p>
      </div>
    )
  }
}

Child.js(子组件)

import React, { Component } from  'react';

export default class Child extends Component{

    state = {
        msg:'我是子组件的数据'
    }
    fnClick(){
        this.props.fun(this.state.msg)
    }
    render(){
        let title = this.props.title
        let {fun} = this.props
        return(
            <div>
                <h1>我是子组件</h1>
                <p>父组件传递的数据是:{title}</p>
                <button onClick={this.fnClick.bind(this)}>点我</button>
            </div>
        )
    }
}

实现效果

  • 点击前
    React学习-脚手架中组件和样式的使用

  • 点击后
    React学习-脚手架中组件和样式的使用

普通样式的使用

  • 直接引入
App.js
import React,{Component} from 'react';
import './App.css'

export default class App extends Component{
  state = {
    data:'Hello React'
  }
  render(){
    return(
      <div>
        <span>{this.state.data}</span>
      </div>
    )
  }
}
App.css
span{
  color:blue
}

最后显示出蓝色的Hello React,这个没什么好说的,比较简单。

引入第三方,安装styled-components,命令如下

npm i styled-components

React学习-脚手架中组件和样式的使用

  • 引入
import style from 'styled-components'
  • 然后我们就可以自定义一个样式的组件
let Box = style.div`
  width:100px;
  height:100px;
  background:blue;
`
export default class App extends Component{
  
  render(){
    return(
      <div>
        <Box/>
      </div>
    )
  }
}
  • 效果
    React学习-脚手架中组件和样式的使用

moudle.css 模块式

  • 先定义文件
    • 注意文件要以XXX.modules.css这样的格式来命名

Demo.module.css

.red{
    color:red;
}
.green{
    color:green;
}
  • 在App.js中引入
import styles from './Demo.module.css'
<span className={styles.red}>Hello React</span>
这里就直接以对象的形式.red即可直接映射到对应的css样式

React学习-脚手架中组件和样式的使用

Sass的使用

  • 下载sass
npm i node-sass

React学习-脚手架中组件和样式的使用

  • 创建scss文件,这里新建的文件要求要以scss作为文件后缀

Demo.scss

.green{
    color:green;
}

App.js

import React,{Component} from 'react';
import './Demo.scss'

export default class App extends Component{

  render(){
    return(
      <div>
        <span className='green'>Hello React</span>
      </div>
    )
  }
}
这里className就不用{}了,直接用’'单引号包起来green就可以了,来看看效果

React学习-脚手架中组件和样式的使用

less(如果不用sass才可以用less,二选一)

  • 下载less
npm i less loader
通常情况下less是不需要配置的,配置文件默认也被隐藏起来了,如果还是需要配置就使用下面的命令
  • npm命令
npm run eject
  • yarn命令
yarn eject
  • 如果报错让你commit就使用下面的命令去提交(使用git的情况下)
git init
git add .
git commit -m 'init'
  • 修改webpack.config.js
    • 所有的sass-loader 改成 less-loader
    • 所有的scss | sass 改成 css | less
至此,sass的配置就改成了less的配置

CSS重置

  • 需要CSS重置的,只需要在App.css或者App.js中引入一段代码即可
@import-normalize;

CSS后置

  • 默认已经带了CSS后置,无需我们手动配置
相关标签: React react js