React 之函数式组件使用props

最新推荐文章于 2024-08-12 15:52:09 发布

冰淇淋配马卡龙

最新推荐文章于 2024-08-12 15:52:09 发布

阅读量4.6k

点赞数 2

分类专栏： react笔记文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_51219425/article/details/123346357

版权

react笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。
在这里插入图片描述

相关代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>3_函数组件使用props</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test1"></div>
    <div id="test2"></div>

    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--引入prop-types,用于将对组件标签属性进行限制-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">   //<!--此处一定要写babel-->
       //创建组件
        function Person(props){
            const {name,gender,age} = props
            return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
        }

        Person.propTypes={
            name:PropTypes.string.isRequired,     //name指定为字符串类型，而且必须得填，不能为空
            gender:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func,       //限制speak为函数
        }
        Person.defaultProps = {         //如果gender或者age值为空，就使用默认值
            gender:'男',
            age:18
        }
        //渲染组件到页面
        ReactDOM.render(<Person name="sandy" age={18} gender="女" speak={speak}/>,document.getElementById('test1'))
        const p={name:'小唐',age:18,gender:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

        function speak(){
            console.log('happy');
        }
    </script>
    </body>
    </html>