react组件实列三大属性-Props

最新推荐文章于 2024-07-23 15:31:11 发布

余生tt

最新推荐文章于 2024-07-23 15:31:11 发布

阅读量51

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63135041/article/details/129756492

版权

一、Props简介

1、每个组件对象都有props属性
2、组件标签的所有属性都保存在props中
3、通过标签属性从组件外向组件内传递变化的数据

二、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>
    <div id="test1"></div>

    <!-- 引入react核心库 -->
    <script src="../../js/react.development.js"></script>
    <!-- 引入react-dom 用于操作dom -->
    <script src="../../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script src="../../js/babel.min.js"></script>

    <script type="text/babel">
       //创建组件
       class Person extends React.Component{
        render(){
            const {name,age,sex}=this.props
            return (
                <ul>
                    <li>{name}</li>
                    <li>{sex}</li>
                    <li>{age}</li>
                </ul>
            )
        }
       }
       //渲染组件到页面
       ReactDOM.render(<Person name="tom" age={18} sex="男"/>,document.getElementById('test'))
     
       //模拟数据
       const p={name:'bobo',age:18,sex:'男'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))
    </script>
</body>
</html>

1.当属性的个数和内容是动态的时可以使用{…p}

//模拟数据
       const p={name:'bobo',age:18,sex:'男'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))

三、属性值的限制

1.由于一些属性的值必须是特定的内容，所有外面需要限制属性的值
比如：年龄为number 姓名为字符串

   class Person extends React.Component{
        render(){
            const {name,age,sex}=this.props
            //props是只读的
            return (
                <ul>
                    <li>{name}</li>
                    <li>{sex}</li>
                    <li>{age+1}</li>
                </ul>
            )
        }
       }
       //对标签属性限制
       Person.propTypes={
        name:PropTypes.string.isRequired, //限制 name 必传(isRequirePd) 且为 String
        sex:PropTypes.string, //限制 sex 为 String
        age:PropTypes.number, //限制 age 为 number
        speak:PropTypes.func  //限制 speack 为函数(func)
       }
       //设置默认值
       Person.defaultProps={
        sex:'沃尔玛购物袋',
        age:18
       }
       //渲染组件到页面
       ReactDOM.render(<Person name="tom" speak={speak} />,document.getElementById('test'))
       ReactDOM.render(<Person name="peter" age={18} sex="女"/>,document.getElementById('test1'))
       
       //模拟数据
       const p={name:"bobo",age:18,sex:'男'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
       
       function speak(){
        console.log("我会说话");
       }

四、props的简写

 //创建组件 
       class Person extends React.Component{
        constructor(props){
            //构造器中如果要通过this访问props，就必须接收props,并传递给super
            console.log(props);
            super(props)
        }
        render(){
            const {name,age,sex}=this.props
            //props是只读的
            return (
                <ul>
                    <li>{name}</li>
                    <li>{sex}</li>
                    <li>{age+1}</li>
                </ul>
            )
        }
        //对标签属性限制
        static propTypes={
        name:PropTypes.string.isRequired, //限制 name 必传(isRequirePd) 且为 String
        sex:PropTypes.string, //限制 sex 为 String
        age:PropTypes.number, //限制 age 为 number
       }
       
        //设置默认值
        static defaultProps={
        sex:'沃尔玛购物袋',
        age:18
       }
      
       }

1、通过static修饰可以直接把属性限制写道类里面

五、函数式组件使用props

1、由于函数时组件可以接收参数，所有它也可以使用props

 <script type="text/babel">
       //创建组件 
    //    class Person extends React.Component{
    //     constructor(props){
    //         //构造器中如果要通过this访问props，就必须接收props,并传递给super
    //         console.log(props);
    //         super(props)
    //     }
    //     render(){
    //         const {name,age,sex}=this.props
    //         //props是只读的
    //         return (
    //             <ul>
    //                 <li>{name}</li>
    //                 <li>{sex}</li>
    //                 <li>{age+1}</li>
    //             </ul>
    //         )
    //     }
    //     //对标签属性限制
    //     static propTypes={
    //     name:PropTypes.string.isRequired, //限制 name 必传(isRequirePd) 且为 String
    //     sex:PropTypes.string, //限制 sex 为 String
    //     age:PropTypes.number, //限制 age 为 number
    //    }
       
    //     //设置默认值
    //     static defaultProps={
    //     sex:'沃尔玛购物袋',
    //     age:18
    //    }
      
    //    }

       //函数式组件
       //传入 props 并使用
       function Person(props){
        const {name,sex,age}=props
        return (
                <ul>
                    <li>{name}</li>
                    <li>{sex}</li>
                    <li>{age+1}</li>
                </ul>
            )
       }
     
       //渲染组件到页面
       ReactDOM.render(<Person name="tom" age={18} sex="男" />,document.getElementById('test'))

2、但是函数式组件要写属性限制的话，要用类式组件的复杂写法

//对标签属性限制
       Person.propTypes={
        name:PropTypes.string.isRequired, //限制 name 必传(isRequirePd) 且为 String
        sex:PropTypes.string, //限制 sex 为 String
        age:PropTypes.number, //限制 age 为 number
        speak:PropTypes.func  //限制 speack 为函数(func)
       }
       //设置默认值
       Person.defaultProps={
        sex:'沃尔玛购物袋',
        age:18
       }