react 新手注意的事项
vscode 安装 simple React Snippets
快速使用
1》 imrc (import React, { Component } from ‘react’;)
2》cc (class ….)
1,样式文件直接import ‘路径引入’ 到js文件中就可以直接使用
2,class样式需要使用className
3,事件使用onClick 类似
4,解释html dangerouslySetInnerHTML={{ __html: item }}
vue是直接v-html,
react
```
<ul>
{this.state.list.map((item, index) => {
return (
<li
onClick={this.deleteItem.bind(this, index)}
key={index + item}
dangerouslySetInnerHTML={{ __html: item }}
></li>
)
})}
</ul>
```
5,父组件向子组件传值(直接用属性的方式)
子组件想通知父组件执行方法,也是用属性的方式,先传过去,在子组件里执行方法
父组件
import React, { Component, Fragment } from 'react'
import './style.css'
import XiaojiejieItem from './xiaojiejieitem'
class Xiaojiejie extends Component {
constructor(props) {
super(props)
this.inputChange = this.inputChange.bind(this)
this.deleteItem = this.deleteItem.bind(this)
this.onClickAdd = this.onClickAdd.bind(this)
this.state = {
inputValue: '',
list: ['基本按摩', '精油推背'],
}
}
render() {
return (
<Fragment>
<div>
<input
className='input'
value={this.state.inputValue}
onChange={this.inputChange}
/>
<button onClick={this.onClickAdd}> 增加服务 </button>
</div>
<ul>
{this.state.list.map((item, index) => {
return (
<XiaojiejieItem
key={index + item}
component={item}
index={index}
deleteItem={this.deleteItem}
/>
)
})}
</ul>
</Fragment>
)
}
inputChange(e) {
this.setState({
inputValue: e.target.value,
})
}
onClickAdd() {
this.setState({
list: [this.state.inputValue, ...this.state.list],
inputValue: '',
})
}
deleteItem(index) {
let list = this.state.list
list.splice(index, 1)
// this.state.list.splice(index,1) 这种是错误写法,不可以直接操作数据
this.setState({
list: list,
})
}
}
export default Xiaojiejie
子组件
import React, { Component } from 'react'
class XiaojiejieItem extends Component {
constructor(props) {
super(props)
this.hiddleFn = this.hiddleFn.bind(this)
}
render() {
return <li onClick={this.hiddleFn}>{this.props.component}</li>
}
hiddleFn() {
this.props.deleteItem(this.props.index)
}
}
export default XiaojiejieItem
父子组件传值的时候一定注意最好进行一下属性校验
https://www.npmjs.com/package/prop-types 类型文档
动画
npm install react-transition-group –save
引入
样式
xxx-enter: 进入(入场)前的CSS样式;
xxx-enter-active:进入动画直到完成时之前的CSS样式;
xxx-enter-done:进入完成时的CSS样式;
xxx-exit:退出(出场)前的CSS样式;
xxx-exit-active:退出动画知道完成时之前的的CSS样式。
xxx-exit-done:退出完成时的CSS样式。
版权声明:本文由Web学习之路发布,如需转载请注明出处。