React 组件的三大核心属性之 props 在函数式组件中的基本使用 

<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 支持react操作DOM -->
    <script type="text/javascript" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 将jsx转为js -->
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <!-- 对组件标签属性进行限制, React v15.5之后，React.PropTypes 移入此包 -->
    <script type="text/javascript" src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

</head>
<body>
<div id="root"></div>

<script type="text/babel">

    //******函数式组件定义******
    //组件的参数都在 props 中
    function FunComponent(props) {
        const {name, age} = props
        return <h1>函数式组件：name = {name}, age = {age}</h1>
    }

    FunComponent.propTypes = {
        //限制name必传，且为字符串
        name: PropTypes.string.isRequired,
        //限制age为数值
        age: PropTypes.number,
        //限制myFunc为函数
        myFunc: PropTypes.func,
    }

    //指定默认标签属性值
    FunComponent.defaultProps = {
        //age默认值为18
        age: 18
    }

    //1.创建虚拟DOM
    const vDOM = <div>
        <FunComponent name="aaa" age={10}/>
    </div>;
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vDOM, document.getElementById("root"));
</script>
</body>

注：
children-data <===> children-data

posted @ 2022-03-07 18:03  叕叕666  阅读(57)  评论(0)    收藏  举报