react16：函数组件中使用props

最新推荐文章于 2024-05-04 22:57:35 发布

richest_qi

最新推荐文章于 2024-05-04 22:57:35 发布

阅读量1.6k

点赞数 1

分类专栏： React17/18 文章标签：函数组件 props

本文链接：https://blog.csdn.net/qzw752890913/article/details/123895977

版权

React 函数组件 props propTypes defaultProps

关键词由CSDN通过智能技术生成

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

函数组件中也可以使用props。看个简单的例子，如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数组件使用props</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        function Person(props){
            const {name,age,gender} = props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }
        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number,
            gender:PropTypes.string
        }
        Person.defaultProps = {
            age:18,
            gender:"男"
        }

        // ReactDOM.render(<Person name="张三"/>,document.getElementById("app"));
        ReactDOM.render(<Person name="张三" age="19"/>,document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述

richest_qi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react16：函数组件中使用props

函数组件中也可以使用props。看个简单的例子，如下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫

专栏目录