React学习（从零基础到精通）1011

函数组件使用props

    <script type="text/babel">
    //创建函数组件
    function Person (props){
        const {name,age,sex} = props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
    }

    Person.propTypes = {
        name:PropTypes.string.isRequired,//限制name必传且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
    }
    //指定默认标签属性值
    Person.defaultProps = {
        sex:"男",//sex默认值为男
        age:18//age默认值为18
    }
    const p = {name:"rose"}
    ReactDOM.render(<Person {...p}/>,document.getElementById("test"))
    </script>