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

最新推荐文章于 2024-01-18 15:18:55 发布

叕叕666

最新推荐文章于 2024-01-18 15:18:55 发布

阅读量542

点赞数

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/m0_50163856/article/details/122807622

版权

React 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<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

叕叕666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 组件的三大核心属性之 props 在函数式组件中的基本使用

<head> <meta charset="UTF-8"> <title>demo</title>  <script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script> <!-- 支持react操作DOM --&
复制链接

扫一扫