react 新手注意的事项

原创 tigon  2020-09-10 09:58:35  阅读 39 次 评论 0 条

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样式。
本文地址:https://webge.net/?id=96
版权声明:本文为原创文章,版权归 tigon 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了
相关文章 关键词:

评论已关闭!