如果有了解过vue的伙计们，应该知道vue父传子，是使用props来使用的。
react也是一样，使用props来传递值。
下面我来介绍一下props

props 可以使用在function创建的组件之中，也可以使用class创建的组件之中，先来简单介绍一下

    <script type="text/babel">
           function Name(props){
                     return (<div> {props.name}</div>)
           }

           let a =<Name name='hello world'/>
           ReactDOM.render(a,document.getElementById('root'))
    </script>

    <script type="text/babel">
        //    function Name(props){
        //              return (<div> {props.name}</div>)
        //    }


           class Name extends React.Component{

               constructor(props){
                        super(props)    //如果自己写构造函数的话，必须使用super(props)
               }
               render(){
                   return(<div> {this.props.name}</div>)
               }
           }

           let a =<Name name='hello world'/>
           ReactDOM.render(a,document.getElementById('root'))
    </script>

图片.png

但是有了解过vue的朋友们肯定会知道在vue中props是可以选择类型或者是默认值的

这一点react，也是有的，但是需要引入prop-types.js

下面来看看效果

      function Name(props) {
           return(
               <div>hello-----{props.name}</div>
           )
       }
       Name.defaultProps={name:123}            //使用defalutProps来给初始值
       Name.propTypes={
           name:PropTypes.numbe             //propTypes来给属性指定类型
       }

https://react.docschina.org/docs/typechecking-with-proptypes.html 可以去react官网上查看更多的指定类型赋值，这里就不多介绍了。
如果类型不匹配，会报警告。
看看class的效果

      import PropTypes from 'prop-types';
     class Name extends React.Component{
          constructor(props){
                         super(props)                           
}
         static defaultProps( { name:'world'})
         static propsTypes({name:PropTypes.string })
        render(){
              return(<div> hello  ----{this.props.name}</div>)
}
}