React动态获取信息年龄+1并增加限制

最新推荐文章于 2022-07-26 09:50:31 发布

万事胜意sy

最新推荐文章于 2022-07-26 09:50:31 发布

阅读量145

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/120170992

版权

React PropTypes 组件属性验证 JSX

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

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

<!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>Document</title>
</head>

<body>
    <!-- 创建容器 -->
    <div id="text1"></div>
    <div id="text2"></div>
    <div id="text3"></div>

</body>

</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<!-- 导入这个js可以对字符串进行限制 -->
<script src="./js/prop-types.js"></script>
<script type="text/babel">
    class Person extends React.Component {
         static propTypes ={
             name:PropTypes.string.isRequired,//限制name为字符串且必须填
             age:PropTypes.number,//限制年龄为数字
             sex:PropTypes.string,//限制性别为字符串
             sperk:PropTypes.func//限制speak为函数
        }
         static defaultProps ={
             sex:'男',//设置性别默认为男
             age:18  //设置年龄默认为18
         }
        render() {
            const {name,age,sex}=this.props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age+1}</li>
                    <li>性别：{sex}</li>

                </ul>
            )
        }
       
    }
    // 标签中传入数据式添加
  ReactDOM.render(<Person name="liming" age={19} sex="男" />,document.getElementById('text1'))
    //数组传入数据添加
    const p ={
        name:"xiaofang",
        age:20,
        sex:"女"
    }
  ReactDOM.render(<Person {...p} />,document.getElementById('text2'))
  ReactDOM.render(<Person />,document.getElementById('text3'))

</script>

在这里插入图片描述

万事胜意sy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React动态获取信息年龄+1并增加限制

<!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>Do
复制链接

扫一扫