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

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

实现效果

• 点击前
  

• 点击后
  

普通样式的使用

• 直接引入

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

• 引入

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

• 效果
  

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样式

Sass的使用

• 下载sass

npm i node-sass

• 创建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就可以了，来看看效果

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后置，无需我们手动配置