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">
    class ClassComponent extends React.Component {

        //对标签属性进行类型、必要性的限制
        static propTypes = {
            //限制name必传，且为字符串
            name: PropTypes.string.isRequired,
            //限制age为数值
            age: PropTypes.number,
            //限制myFunc为函数
            myFunc: PropTypes.func,
        }

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

        render() {
        	//组件的参数都在 props 中
            const {name, age} = this.props
            return <h1>类式组件：name = {name}, age = {age}</h1>
        }

    }

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

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

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