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>
)
}
}
实现效果
-
点击前
-
点击后
普通样式的使用
- 直接引入
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后置,无需我们手动配置
推荐阅读