React三大组件--props

最新推荐文章于 2024-05-11 12:17:32 发布

一位正在提升技术的HelloKitty

最新推荐文章于 2024-05-11 12:17:32 发布

阅读量268

点赞数 5

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/hsyldw2000/article/details/137179034

版权

1.定义：每个组件对象都会有props属性；组件标签的所有属性都保存在props中。

2.作用：通过标签属性从组件外向内传递变化的数据。组件内部不能修改props数据。

3.操作

1.内部读取某个属性的值：

this.props.name

2.对props 中的属性值进行类型显示和必填性限制

// React V15.5 之前
Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

// React v15.5 之后，需要引入 prop-types 库进行限制
Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

3.扩展属性：将对象的所有属性通过props传递

<Person {...person} />

4.实例操作

需求：

姓名必须指定，且为字符串类型；
性别为字符串类型，如果性别没有指定，默认为男
年龄为字符串类型，且为数字类型，默认值为18

界面效果：

代码展示（标准写法）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props基础用法</title>
</head>
<body>
    <div id="day"></div>
    <div id="day1"></div>

    <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> 
    <script type="text/babel">
        class Person extends React.Component {
           
            render() {
                const {name,age,sex} = this.props
                return (
                    <ul>
                        <li>姓名:{name}</li>    
                        <li>年龄:{age}</li>    
                        <li>性别:{sex}</li>    
                    </ul>
                )
            }
        }
        // 对标签属性进行类型  必填性的限制
        Person.propTypes = {
            name:PropTypes.string.isRequired,  //限制name属性必填,且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数字
            speak:PropTypes.func,//限制speak为函数
        }
        // 指定默认标签属性值
        Person.defaultProps = {
            sex:"男",
            age:18,
        }
         ReactDOM.render(<Person name='小王' age={21} speak={speak} />,document.getElementById('day'))
        
       const p = {name:'小李',sex:'男'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('day1'))

       function speak(){
        console.log('我在所化')
       }
    </script>
   
</body>
</html>

代码展示（简写）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props基础用法</title>
</head>
<body>
    <div id="day"></div>
    <div id="day1"></div>

    <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> 
    <script type="text/babel">
        class Person extends React.Component {
            // 对标签属性进行类型  必填性的限制
            static propTypes = {
                name:PropTypes.string.isRequired,  //限制name属性必填,且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age为数字
                speak:PropTypes.func,//限制speak为函数
            }
            // 指定默认标签属性值
            static defaultProps = {
                sex:"男",
                age:18,
            }
                render() {
                    const {name,age,sex} = this.props
                    return (
                        <ul>
                            <li>姓名:{name}</li>    
                            <li>年龄:{age}</li>    
                            <li>性别:{sex}</li>    
                        </ul>
                    )
                }
            }
        
        ReactDOM.render(<Person name='小王' age={21} speak={speak} />,document.getElementById('day'))
        
       const p = {name:'小李',sex:'男'}
       ReactDOM.render(<Person {...p}/>,document.getElementById('day1'))

       function speak(){
        console.log('我在所化')
       }
    </script>
   
</body>
</html>

两者的区别:

将属性限制的代码放到了函数体内，使用 static 静态类的方式使用。

函数式组件也可以用props 参数，因为函数可以接收参数，接到的参数就是props参数。具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>props基础用法</title>
  </head>
  <body>
    <div id="day1"></div>

    <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>
    <script type="text/babel">
      function Person(props) {
        const { name, age, sex } = props;
        return (
          <ul>
            <li>姓名:{name}</li>
            <li>年龄:{age}</li>
            <li>性别:{sex}</li>
          </ul>
        );
      }

      Person.propTypes = {
        name: PropTypes.string.isRequired, //限制name属性必填,且为字符串
        sex: PropTypes.string, //限制sex为字符串
        age: PropTypes.number, //限制age为数字
      };
      // 指定默认标签属性值
      Person.defaultProps = {
        sex: "男",
        age: 18,
      };

      ReactDOM.render(<Person name="zhangsan" age={18}  />, document.getElementById("day1"));

    </script>
  </body>
</html>

我在这记录一下展开运算符的使用，如果有忘记的就来着看看吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开元素符</title>
</head>
<body>
    <script>
        const str1 = [1,3,5,7,9]
        const str2 = [2,4,6,8,10]
        // 将数据展开
        console.log(...str1)
        // 合并数组
        const str3 = [...str1,...str2]
        console.log(str3)
        // 累加计算器
        function sum(...numbers){
            return numbers.reduce((preValue,currentValue)=>{
                return preValue+currentValue
            })
        }
        console.log('xiangjia ',sum(1,2,3,4,5,6,7,8,9))
        // 构造字面量对象时使用展开运算符
        let person = {name:'zhangsan',age:'18'}
        let person2 = {...person}
        person.name = 'jack'
        console.log(person)
        console.log(person2)

        // 合并
        let person3 = {...person,name:'xiaoli',addr:'beijing'}
        console.log(person3)
    </script>
</body>
</html>

一位正在提升技术的HelloKitty

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
React三大组件--props

函数式组件也可以用props 参数，因为函数可以接收参数，接到的参数就是props参数。1.定义：每个组件对象都会有props属性；组件标签的所有属性都保存在props中。将属性限制的代码放到了函数体内，使用 static 静态类的方式使用。2.对props 中的属性值进行类型显示和必填性限制。我在这记录一下展开运算符的使用，如果有忘记的就来着看看吧。2.作用：通过标签属性从组件外向内传递变化的数据。3.扩展属性：将对象的所有属性通过props传递。年龄为字符串类型，且为数字类型，默认值为18。
复制链接

扫一扫