Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據是否有效。當向 props 傳入無效數(shù)據時，JavaScript 控制臺會拋出警告。

#父組件
import React, { Component } from 'react'
import Navbar from './Navbar'

export default class App extends Component {
  render() {
    return (
        <div>
            <Navbar title="首頁" leftshow={false} />
            <Navbar title="列表"  />
            <Navbar title="購物車" />
      </div>
    )
  }
}

你可以通過組件類的 defaultProps 屬性為 props 設置默認值，實例如下：

#子組件 類組件

import React, { Component } from 'react'
import propTypes from 'prop-types'
export default class Navbar extends Component {
//第二種寫法
    static propTypes = {
            title: propTypes.string,
            leftshow: propTypes.bool
    }

    static defaultProps = {
        leftshow: true
    }
   
    render() {
       let {title,leftshow}=this.props
      console.log(this.props)
    return (
        <div>
            <div> {leftshow && <button>return</button>}  nav-{title} </div>
      </div>
    )
  }
}
//第一種寫法
// Navbar.propTypes = {
//     title: propTypes.string,
//     leftshow: propTypes.bool
// }
/**默認值 */
// Navbar.defaultProps = {
//     leftshow: true
// }

函數(shù)式組件通過props 傳值，沒有this，通過rfc創(chuàng)建函數(shù)式組件
直接通過props傳值

# 子組件 函數(shù)式組件
import React, { Component } from 'react'
export default function Slidebar(props) {
    let { bg,position } = props;
    var obj1 = {
        left:0
    }
    var obj2 = {
        right:0
    }
    var obj3 = {
        background: bg,
        width:'200px',position:'fixed'
    }
    var styleObj= position==='left'?{...obj1,...obj3}:{...obj2,...obj3}
    return (
        <div style={styleObj}>
                <ul>
                    <li>Home</li>
                    <li>List</li>
                    <li>NewsList</li>
                    <li>Contact</li>
                    <li>Company</li>
                    <li>Personal</li>
                </ul>
        </div>
    )
}

 #父組件的函數(shù)式組件傳值方式
import React, { Component } from 'react'
import Navbar from './Navbar' /*類組件*/
import Slidebar from './Slidebar' /**函數(shù)式組件 */
export default class App extends Component {
  render() {
    return (
        <div>
           <Navbar title="首頁" leftshow={false} />
            <Navbar title="列表"  />
            <Navbar title="購物車" />
            {/* 函數(shù)式組件  */}
            <Slidebar bg="yellow" position="right"></Slidebar>
      </div>
    )
  }
}