React 积累

1. Fragment 标签

使用介绍：因React要求每个组件都需要一个大的外层包裹起来才可以，否则报错，如果你并不想组件外层由一个大大外层包裹，则可以使用Fragment 标签

代码示例：

import React, { Component, Fragment } from "react";

class Xiao extends Component {
  render() {
    return (
      <Fragment>
        <ul>
          <li>头部按摩</li>
          <li>精油推背</li>
        </ul>
      </Fragment>
    )
  }
}

export default Xiao

 

2. dangerouslySetInnerHTML={{ __html: e }}  e可为(html标签，字符串， 数字，布尔)

// 将html标签放入
const html = "<h1>html识别</h1>"

// 之所以是有2个{{}}，是因为第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对
<div dangerouslySetInnerHTML={{ __html: html }}></div>

　　

3. lable 标签

点击lable，可以激活input文本框

<label htmlFor="hhh">加入服务：</label>
<input id="hhh" className="input" placeholder="请输入服务" />

　　

4.父组件传子组件

父组件
import XiaojiejieItem from './xiaojiejieItem'

class Xiaojiejie extends Component {
  constructor() {
    super()
    this.state = {
      inputVal: '你好'
    }
  }

  delService() {
    this.setState({
      inputVal: '哈哈'
    })
  }

   render() {
       return (
        <XiaojiejieItem content={inputVal} delService={this.delService.bind(this)} />
        )          
    }
}

子组件
import React, { Component } from 'react'; // imrc

class xiaojiejieItem extends Component { // cc
  constructor(props) {
    super(props)
  }

  handleclick() {
    this.props.delService('哈喽')
  }

  render() {
    return (
      <div>{this.props.content}</div>
    );
  }
}

export default xiaojiejieItem;

　　

5. propsTypes校验 （在父组件向子组件传递数据时，使用了属性的方式，也就是props，但我们需要校验，校验数据的类型）

import React, { Component } from 'react'; // imrc
import PropType from 'prop-types';

class xiaojiejieItem extends Component { // cc
  constructor(props) {
    super(props)
    this.handleclick = this.handleclick.bind(this)
  }

  handleclick() {
    this.props.delService(this.props.index)
  }

  render() {
    return (
      <div onClick={this.handleclick}>{this.props.content}</div>
    );
  }
}

xiaojiejieItem.propTypes = {
  content: PropType.string,
  delService: PropType.func,
  index: PropType.number，
　avname: PropType.string.isRequired //确保avname是否存在，如否则报错
}

export default xiaojiejieItem;

　

6. defaultProps 设置props默认值

import React, { Component } from 'react'; // imrc
import PropType from 'prop-types';

class xiaojiejieItem extends Component { // cc
  constructor(props) {
    super(props)
    this.handleclick = this.handleclick.bind(this)
  }

  handleclick() {
    this.props.delService(this.props.index)
  }

  render() {
    return (
      <div onClick={this.handleclick}>{this.props.content}</div>
    );
  }
}

xiaojiejieItem.propTypes = {
  content: PropType.string,
  delService: PropType.func,
  index: PropType.number，
　avname: PropType.string.isRequired //确保avname是否存在，如否则报错
}

// 默认设置值，如父级未传avname，则可给一个默认值
xiaojiejieItem.defaultProps = {
　　avname: '松岛枫'
}

export default xiaojiejieItem;

 

7. shouldComponentUpdate（组件发生改变前执行）

当在input框中输入value的时候，render函数，componentDidUpdate函数会频繁执行，在性能方面，不推荐此操作，shouldComponentUpdate可帮助我们避免

尝试～感觉没什么效果 

 

8. CSSTransition，TransitionGroup动画