7. React组件三大核心属性之props

最新推荐文章于 2024-06-11 09:50:12 发布

神奇洋葱头

最新推荐文章于 2024-06-11 09:50:12 发布

阅读量239

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq28129019/article/details/115306258

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文详细讲解了如何在React 16.8.4中接收类组件外部数据，利用展开运算符简化属性传递，以及如何使用PropTypes进行props数据的限定，包括默认值和警告机制。同时介绍了类式组件构造器与props的最佳实践和函数式组件的使用方式。

摘要由CSDN通过智能技术生成

react版本 v16.8.4

1 接收类组件外部的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class MyComponent extends React.Component{

        render(){
            console.log("类中render   this=",this);
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                </ul>
            )
        }
    }

    const person = {name:"tom", sex:"女", age:"18"}
    //3.2 渲染组件到页面
    //直接从类的外部给类的实例对象赋值
    //而且赋值都传到类的实例对象的props属性上面 props: {},
    ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
</script>
</body>
</html>

如果person的属性比较多，有个语法糖写法: 展开运算符 {…person}

ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))

前提是后台返回的数据和类组件的属性的名字是一样的，否则不能这么写；

展开运算符在js中不能用于对象，只能用于数组
react此处展开运算符可以使用的原因是因为 react.js + babel，允许在react里面对对象使用展开运算符，并且仅仅用于标签属性的传递，仅用于标签内。

2. JavaScrip中的展开运算符 …

展开数组和连接数组

let arr01 = [1,3,5];
let arr02 = [2,4,6];
let arr03 = [...arr01,...arr02];
console.log("数组         arr01="arr01);
console.log("展开运算符    arr01",...arr01);
console.log("展开运算符连接数组    ", arr03);
let person01 = {name:"tom", age:18};

输出结果：

在这里插入图片描述

构造字面量对象（复制对象）

let person01 = {name:"tom", age:18}
//构造字面量对象
let person02 = {...person01};
console.log("person02= ",person02);
person01.name="jerry";
console.log("修改后  person01=",person01);
console.log("修改后  person02=",person02);

在这里插入图片描述

复制对象、改变对象的属性、添加新属性

let person01 = {name:"tom",age:18};
let person02 = {...person01,name:"jerry",address:"东莞"};
console.log("person01=",person01);
console.log("person02=",person02);

输出结果如下：
在这里插入图片描述

3. 限定props数据的属性

3.1 使用PropTypes限定属性

使用prop-types.js
截至15.x版本使用的是React.PropTypes
16.x+版本把PropTypes从React中分离出去，需要单独引入js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class MyComponent extends React.Component{

        render(){
            console.log("类中render   this=",this);
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                </ul>
            )
        }
    }
    MyComponent.propTypes = {
        //这种写法支持15.x及其以下版本；在react16.x及其以上版本弃用
        // name:React.PropTypes.string.isRequired
        //16.x+版本把PropTypes从React中分离出去，需要单独引入js prop-types.js
        name:PropTypes.string.isRequired

    };
    const person = {name:"tom", sex:"女", age:"18"}
    //3.2 渲染组件到页面
    //直接从类的外部给类的实例对象赋值
    //而且赋值都传到类的实例对象的props属性上面 props: {},
    //ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
    ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
</script>
</body>
</html>

3.2 PropTypes可用限定属性

string 字符串类型
number 数值类型
isRequired 必填
func 必须是函数类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class MyComponent extends React.Component{

        render(){
            console.log("类中render   this=",this);
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                </ul>
            )
        }

    }
    MyComponent.propTypes = {
        //这种写法支持15.x及其以下版本；在react16.x及其以上版本弃用
        // name:React.PropTypes.string.isRequired
        //16.x+版本把PropTypes从React中分离出去，需要单独引入js prop-types.js
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number
    };

    //设置默认值
    MyComponent.defaultProps = {
        sex:"不详",
        age:16
    };

    function speak(){
        console.log("speak方法....");
    }

    const person = {name:"tom", sex:"女", age:18};
    const person02 = {name:"Jerry", speak:speak};
    //3.2 渲染组件到页面
    //直接从类的外部给类的实例对象赋值
    //而且赋值都传到类的实例对象的props属性上面 props: {},
    //ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
    ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
    ReactDOM.render(<MyComponent {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>

输出结果如下：
在这里插入图片描述
提示有警告，
修改默认值 age:16
输出结果如下：

没有任何警告和错误

3.3 使用限定只是警告并非报错

3.4 props限定的属性都是只读的，无法修改

4. props属性的限定简写

props限定的是类组件属性的格式或者默认值，可以写在类组件里面；
但是不能像state那样简写，state的简写是把state挂在类的实例上面；
应该把props挂靠在类的原型上，这里使用一个关键字 static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建组件
    class MyComponent extends React.Component{

        render(){
            console.log("类中render   this=",this);
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                </ul>
            )
        }

        //为类的原型上设置属性的类型限定
        static propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number
        };

        //在类的原型上设置默认值
        static defaultProps = {
            sex:"不详",
            age:16
        };

    }

    function speak(){
        console.log("speak方法....");
    }

    const person = {name:"tom", sex:"女", age:18};
    const person02 = {name:"Jerry", speak:speak};
    //3.2 渲染组件到页面
    //直接从类的外部给类的实例对象赋值
    //而且赋值都传到类的实例对象的props属性上面 props: {},
    //ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
    ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
    ReactDOM.render(<MyComponent {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>

5. 类式组件中构造器和props（了解）

类式组件构造器可以完全省略
如果不省略构造器，react官方给出的实例是如下：

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

就是把props传入super()函数

如果props不传入构造函数中:：

constructor() {
  super();
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

结果不会报错，但是有个区别
如果不传入props，那么在构造器中,this.props = undefined ;
如果不需要在构造器中使用this.props，可以完全不传入props，构造器都不用写；

6. 函数式组件使用props

函数式组件能够使用props，因为函数可以接受参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    //3.1 创建函数式组件
    function Person_func(props){
        const {name,sex,age} = props
        return (
            <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
            </ul>
        )
    }

    Person_func.propTypes = {
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number
    };

    //设置函数式默认值
    Person_func.defaultProps = {
        sex:"不详",
        age:16
    };

    function speak(){
        console.log("speak方法....");
    }

    const person = {name:"tom", sex:"女", age:18};
    const person02 = {name:"Jerry", speak:speak};

    //3.2 渲染组件到页面
    ReactDOM.render(<Person_func {...person}/>, document.getElementById("root"))
    ReactDOM.render(<Person_func {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>

神奇洋葱头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
7. React组件三大核心属性之props

1.基本用法1.1 接收类组件外部的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>props</title></head><body><div id="root"></div>&
复制链接

扫一扫