react的通过props父组件向子组件传值

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，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
// }

函数式组件通过props 传值，没有this，通过rfc创建函数式组件
直接通过props传值

# 子组件 函数式组件
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>
    )
}

 #父组件的函数式组件传值方式
import React, { Component } from 'react'
import Navbar from './Navbar' /*类组件*/
import Slidebar from './Slidebar' /**函数式组件 */
export default class App extends Component {
  render() {
    return (
        <div>
           <Navbar title="首页" leftshow={false} />
            <Navbar title="列表"  />
            <Navbar title="购物车" />
            {/* 函数式组件  */}
            <Slidebar bg="yellow" position="right"></Slidebar>
      </div>
    )
  }
}