首页 > 其他 > 详细

React组件的属性和方法

时间:2019-12-01 17:10:31      阅读:54      评论:0      收藏:0      [点我收藏+]

1. SthComp.propTypes

// V15.5之后
import PropTypes from ‘prop-types‘;

该方法适用于函数组件和class组件。

如果使用了@babel/plugin-proposal-class-properties插件,

可以直接在组件内部作为静态属性。

class App extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  }
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}

在组件(class组件和函数组件都适用)外部:

class App extends React.Component {
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}
App.propTypes = {
  name: PropTypes.string.isRequired
}
// 函数组件
function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.propTypes = {
  name: PropTypes.string.isRequired
}

2.SthComp.defaultProps

用法同propTypes。既可以在组件内部也可以在组件外部。

用于给props属性赋初始值,  当属性值为undefined时生效,null不生效。

运行在propTypes类型检查前。

function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.defaultProps = {
  name: "lyra"
}
ReactDOM.render(<App name={undefined} />, window.root)

3.SthComp.getDerivedStateFromProps-类组件

返回一个state值的对象。

4.SthComp.getSnapShotBeforeUpdate-类组件

 

React组件的属性和方法

原文:https://www.cnblogs.com/lyraLee/p/11966051.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!