React学习（从零基础到精通）1001

最新推荐文章于 2024-07-24 08:58:17 发布

南才

最新推荐文章于 2024-07-24 08:58:17 发布

阅读量94

点赞数

分类专栏： react学习 react 文章标签： react

本文链接：https://blog.csdn.net/Heyuner/article/details/117841462

版权

react 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

react学习

25 篇文章 0 订阅

订阅专栏

对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>2_对props进行限制</title>
    <style>
        
    </style>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></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">
    //创建组件
    class Person extends React.Component {
        render(){
            // console.log(this);
            const {name,age,sex} = this.props;
            //props是只读的
            // this.props.name = "jaja"  //此行代码会报错，因为props是只读的
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age+1}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }
    }
    //对标签属性进行类型，必要性的限制
    Person.propTypes = {
        name:PropTypes.string.isRequired,//限制name必传且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
        speak:PropTypes.func//限制speak为函数，注意是func,包括string，number等都是为了避免和内置的对象产生冲突
    }
    //指定默认标签属性值
    Person.defaultProps = {
        sex:"男",//sex默认值为男
        age:18//age默认值为18
    }
    const p = {name:"jack",age:40,sex:"男"}
    ReactDOM.render(<Person name="tom" speak={speak}/>,document.getElementById("test"))
    ReactDOM.render(<Person name="jerry" age={28} sex="女"/>,document.getElementById("test2"))
    // ReactDOM.render(<Person name="jack" age="40" sex="男"/>,document.getElementById("test3"))
    ReactDOM.render(<Person {...p}/>,document.getElementById("test3"))
    function speak(){
        console.log("我说话了");
    }
    </script>
</body>
</html>

南才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习（从零基础到精通）1001

对props进行限制 <script type="text/babel"> //创建组件 class Person extends React.Component { render(){ // console.log(this); const {name,age,sex} = this.props; //props是只读的 // this.props.nam
复制链接

扫一扫

专栏目录