当前位置:首页 > React > 正文内容

react 新手注意的事项

tigon4年前 (2020-09-10)React1818

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学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=96

返回列表

上一篇:jsx本质

下一篇:react 记录

“react 新手注意的事项” 的相关文章

react 记录

react 记录

jsx讲法规则: 1.定义虚拟DOM时,不要写引号 2.标签中混入js表达式时要用{} 3.样式的类名指定不要用class,要用className 4.内联样式,要用style={{key:value}}的形式去写 5.只有一个根标签 6.标签必须闭合 7....