React prop使用和传入限制、默认值

组件的props（ props是一个对象 ）

作用：接收传递给组件的数据
特点：
1、可以给组件传递任意类型的数据
2、props是只读的对象，只能读取属性的值，无法修改对象
3、注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props

props 的使用

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

对props进行限制

一定要引入 prop-types.js 否则会报错

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <!-- 引入prop-types, 用于对组件标签属性进行限制 引入后全局就多了一个对象 PropTypes -->
  <script src="../js/prop-types.js"></script>

  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 限制规则
  Person.propTypes = {
    // 限制name 内容为字符串  isRequired 表示该内容为必须的不能省略
    name:PropTypes.string.isRequired,
    // 限制sex为字符串
    sex: PropTypes.string,
    // 限制age为数值
    age: PropTypes.number,
    // 限制speak为函数
    speak: PropTypes.func
  }
  Person.defaultProps = {
    sex:'男',// sex 默认值 为男
    age:18,
    speak: function() {
        return [1];
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
  </script>

props限制总结：

1、限制规则使用Person.propTypes进行限制，有func（函数），string（字符串），number（数字类型），isRequired（不能为空）
2、设置默认值Person.defaultProps，进行props默认值的设置