React02_面向组件编程2.2_组件实例的三大核心属性_props

2.3 组件实例的三大核心属性2: props

• 效果

  需求：自定义用来显示一个人员信息的组件

 // 1. 创建组件
  class Person extends React.Component{
    
    
      render (){
    
    
          const {
    
    name, age, sex} = this.props;
          // props是只读的
          return (
              <ul>
              	<li>姓名：{
    
    name}</li>
              	<li>性别：{
    
    sex}</li>
              	<li>年龄：{
    
    age + 1}</li>
              </ul>
  		)
  	}
  }
  // 对标签属性进行类型、必要性的限制
  Person.propTypes = {
    
    
      // 字符串必填
      name : PropTypes.string.isRequired,
      sex : PropTypes.string,
      age : PropTypes.number,
      speak : PropTypes.func
  }
  // 指定默认标签属性值
  Person.defaultProps = {
    
    
      sex : '男', // 指定默认值
      age : 18
  }
  
  // 2. 渲染组件到页面
  ReactDOM.render(<Person name="tom" age={
    
    18} sex="女" speak={
    
    speak}/>, document.getElementById('container'))
  
  
  const p = {
    
    name : 'dd', age: 12, sex:'girl'}
  ReactDOM.render(<Person {
    
    ...p}/>, document.getElementById('container1'))

• 简写：

// 1. 创建组件
  class Person extends React.Component{
    
    
    constructor(props) {
    
    
          // 构造器是否接受props，是否传递给super，取决于是否希望在构造器中通过this访问props
          console.log(props);
          super();
          console.log(this.props); // undefined
      }                                           
      /* 
          构造函数：
           1. 通过this.state 复制对象来初始化内部 state
           2. 为事件处理函数绑定事件
      */
  
      // 对标签属性进行类型、必要性的限制
      static propTypes = {
    
    
          // 字符串必填
          name : PropTypes.string.isRequired,
          sex : PropTypes.string,
          age : PropTypes.number,
      }
      // 指定默认标签属性值
      static defaultProps = {
    
    
          sex : '男', // 指定默认值
          age : 18
      }
  
  	render (){
    
    
      	const {
    
    name, age, sex} = this.props;
              // props是只读的
              return (
                  <ul>
                      <li>姓名：{
    
    name}</li>
                      <li>性别：{
    
    sex}</li>
                      <li>年龄：{
    
    age + 1}</li>
                  </ul>
          	)
  	}
  }
  
  // 2. 渲染组件到页面
  ReactDOM.render(<Person name="tom"/>, document.getElementById('container'))

• 函数式组件

  function Person (props){
    
    
      const {
    
    name, sex, age} = props;
      return (
          <ul>
          	<li>姓名：{
    
    name}</li>
              <li>性别：{
    
    sex}</li>
              <li>年龄：{
    
    age}</li>
  		</ul>
  	)
  }
  // 对标签属性进行类型、必要性的限制
  Person.propTypes = {
    
    
      // 字符串必填
      name : PropTypes.string.isRequired,
      sex : PropTypes.string,
      age : PropTypes.number,
  }
  // 指定默认标签属性值
  Person.defultProps = {
    
    
      sex : '男', // 指定默认值
      age : 18
  }
  // 2. 渲染组件到页面
  ReactDOM.render(<Person name="tom" sex="女" age={
    
    12}/>, document.getElementById('container'))

• 理解

  • 每个组件对象都有props属性
  • 组件标签的所有属性都保存在props中

• 作用

  • 通过标签属性从组件外像组件内传递变化的数据
  • 组件内部不要修改props数据

• 编码操作

  • 内部读取某个属性值

    this.props.name
    

  • 对props中的属性值进行类型限制和必要性限制

    需要引入库

    <!-- 引入react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作DOM -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types, 用于对组件标签属性进行限制 -->
    <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
    

  • 扩展属性：将对象的所有属性通过props传递

  • 默认属性值

    Person.defaultProps = {
            
            
        age : 18,
        sex : "男"
    }
    

  • 组件类的构造函数

    扫描二维码关注公众号，回复： 13199754 查看本文章

    constructor(props){
            
            
        super(props);
    }