react个人笔记 --三大属性之props

最新推荐文章于 2023-03-25 16:46:10 发布

奇葩之小王子

最新推荐文章于 2023-03-25 16:46:10 发布

阅读量127

点赞数

文章标签： react js html

本文链接：https://blog.csdn.net/qq_52138438/article/details/115253794

版权

props是react重要的属性之一,我们可以通过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>1_props基本使用</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></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>

    <script type="text/babel" >

    // 创建组件
    class Person extends React.Component{
        render(){
            console.log(this);
            const{name,age,sex} = this.props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>    
                </ul>
            )
        }
    }
    const p ={name : 'jerry', age : '19', sex : '男'}
    //ReactDOM.render(<Person name = 'jerry' age = '19' sex = '男'/>,document.getElementById('test'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('test'))//省略符号的使用可以查阅相关文档
</script>

</body>
</html>

通过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>state</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></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" >

    // 创建组件
    class Person extends React.Component{
        render(){
            //console.log(this);
            const{name,age,sex} = this.props

            //props是只读的
            //this.props.name = 'jack'//此行代码会报错,因为props是只读的
            return (    
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>    
                </ul>
            )
        }
    }
    //对标签属性进行类型、必要性的限制
    Person.propTypes = {
        name:PropTypes.string.isRequired,//限制name必传,且为字符串
        sex:PropTypes.string,//限制性别为字符串
        age:PropTypes.number,//限制number为数字
        speak:PropTypes.func,//限制speak为函数
    }
    //指定默认标签属性值
    Person.defaultProps = {
        sex:'不男不女',
        age:18
    }


    ReactDOM.render(<Person name = 'tom' age = {18} sex = '男' speak={speak}/>,document.getElementById('test'))
    const p ={name : 'jerry', age : 19, sex : '男'}
    ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))

    function speak(){
        console.log('我说话了');
    }
</script>

</body>
</html>

如果用户传入的数据不符合我们所规定的形式,那么控制台上将会出现警告

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react个人笔记 --三大属性之props

props是react重要的属性之一,我们可以通过props来限制或接受传入的数据先来看看它的简单使用, 接受数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
复制链接

扫一扫