組件的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默認值的設置