React之props的基本使用

通常props扮演这数据传递的角色,在react之中也是如此
1.在函数组件之中传递

<script type="text/babel">

    //props基本使用
    function Com(props){
        return (
            <div>外部传递的数据：{props.text} ---{props.num}</div>
        )
    }

    //使用对象进行传递多个数据
    let obj={
        text:"text数据",
        num:"num数据"
    }

        //...是ES6的扩展运算符 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
       ReactDOM.render(<Com{...obj} />,document.getElementById("demoReact"));    

    </script>

结果如下

2.在类组件之中传递

//使用对象进行传递多个数据
    let obj={
        text:"text数据",
        num:"num数据"
    }
    //类组件
        class  Com extends React.Component{
            render(){
                return(
                    <div>
                        类组件---{this.props.text}---{this.props.num}
                    </div>
                )
            }
        }
        //...是ES6的扩展运算符 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
       ReactDOM.render(<Com{...obj}/>,document.getElementById("demoReact"));    

3.props默认值设置
在无状态组件中，不传递值得效果是什么样子？

 //props基本使用
    function Com(props){
        return (
            <div>外部传递的数据：{props.text} </div>
        )
    }
 ReactDOM.render(<Com/>,document.getElementById("demoReact"));    

显示数据得地方什么也没有，怎么设置默认值呢?

设置默认值之后得代码

 //props基本使用
    function Com(props){
        return (
            <div>外部传递的数据：{props.text} </div>
        )
    }
    //设置默认值
    Com.defaultProps={
        text:"null"
    }
 ReactDOM.render(<Com/>,document.getElementById("demoReact"));    

没有传递值就会显示设置得默认值