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动画

巴特西

React 积累

最新文章

热门文章