React入门(二)---- 组件样式添加、嵌套和事件绑定
组件添加样式的几种方式
行内添加样式
import React, { Component,Fragment } from 'react';
export default class CompOne extends Component {
styled = { // 实例属性
text: {width: '100px',height: '100px',background: 'blue'}
}
render() {
const styles = {
text: {width: '100px',height: '100px',background: 'yellow'}
}
return (
<Fragment>
<h3> React样式添加 - 行内样式 </h3>
<p style = {{width: '100px',height: '100px',background: 'red'}}></p>
<p style = { styles.text }></p>
<p style = { this.styled.text }></p>
</Fragment>
)
}
}
引入外部的样式
import React, { Component,Fragment } from 'react';
import './App.css' //同理我们可以引入sass和less为标签添加样式,需安装node-sass或node-less插件
export default class App extends Component {
render() {
return (
<Fragment>
<h3> React样式添加 - 类名的添加 </h3>
<p className = "box"></p>
</Fragment>
)
}
}
使用classname插件控制组件样式
import React, { Component,Fragment } from 'react';
import './App.scss'
import classname from 'classname'
export default class App extends Component {
render() {
return (
<Fragment>
<h3> React样式添加 - 不同的条件添加不同的样式 </h3>
<p className = {classname({
bigsize: false,
middlesize: true,
smallsize: false,
bg:true
})}></p>
</Fragment>
)
}
}
使用styled-components书写样式以及参数传入
import React,{ Component,Fragment } from 'react'
import styled from 'styled-components'
const AppContent = styled.div`
width: 200px;
height: 200px;
border: 1px dashed black;
header{
width: 50px;
height: 50px;
background: ${ props => props.flag && 'purple' || 'red' };
i{
display: block;
width: 25px;
height: 25px;
background: ${ props => props.color };
}
}
`
class App extends Component {
render () {
return (
<Fragment>
<AppContent flag={false} color="green" >
<header>头部<i></i></header>
</AppContent>
</Fragment>
)
}
}
export default App
组件的嵌套
import React,{ Component,Fragment } from 'react'
class Father extends Component {
render () {
return (
<Fragment>
<h3> This is Father</h3>
{this.props.children}
<Son>
<p>这是爸爸给你的</p>
</Son>
</Fragment>
)
}
}
class Son extends Component {
render () {
return (
<Fragment>
<h3>This is son</h3>
{this.props.children}
</Fragment>
)
}
}
class Comp extends Component {
render () {
return (
<Fragment>
<h2>This is boss </h2>
<Father>
<p>这是老大给你的</p>
</Father>
</Fragment>
)
}
}
export default Comp
组件的事件绑定
事件绑定总共有四种方式
一、行内绑定事件
import React,{ Component,Fragment } from 'react'
export default class First extends Component {
render () {
return (
<Fragment>
<button onClick={ () => { alert('This is ok') } } > click me </button>
</Fragment>
)
}
}
二、组件内使用箭头函数定义事件 【推荐】
import React,{ Component,Fragment } from 'react'
export default class Second extends Component {
constructor (props) {
super(props)
this.state = {
money : 10000
}
}
changeMoney = () => {
this.setState({
money : 15000
})
}
render () {
const { money } = this.state
return (
<Fragment>
<button onClick={ this.changeMoney } > change money </button>
<p>{ money }</p>
</Fragment>
)
}
}
三、定义非箭头函数事件,行内使用bind改变this指向
import React,{ Component,Fragment } from 'react'
export default class Second extends Component {
constructor (props) {
super(props)
this.state = {
money : 10000
}
}
costAll () {
this.setState({
money : 0
})
}
render () {
const { money } = this.state
return (
<Fragment>
<button onClick={ this.costAll.bind(this) } > cost all </button>
<p>{ money }</p>
</Fragment>
)
}
}
四、定义非箭头函数事件,在constructor内使用改变this指向【推荐】
import React,{ Component,Fragment } from 'react'
export default class Second extends Component {
constructor (props) {
super(props)
this.state = {
money : 10000
}
this.getMoney = this.getMoney.bind(this)
}
getMoney () {
this.setState({
money : 20000
})
}
render () {
const { money } = this.state
return (
<Fragment>
<button onClick={ this.getMoney } > get money </button>
<p>{ money }</p>
</Fragment>
)
}
}