React核心属性props属性及用法详解

组件核心属性-props

需求:自定义用来显示一个人员信息的组件

javascript 复制代码
   class Person extends React.Component {
            render() {
                const { name, age, sex } = this.props;
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>年龄:{age + 1}</li>
                        <li>性别:{sex}</li>
                    </ul>
                )
            }
        }


        ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
        ReactDOM.render(<Person name="Lilly" age={18} sex="女" />, document.getElementById('test2'))
        ReactDOM.render(<Person name="双下巴" age={23} sex="不明" />, document.getElementById('test3'))
  1. 姓名必须指定,且为字符串类型
go 复制代码
           //对标签属性进行类型、必要性的限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            dance: PropTypes.func
        }
  1. 性别为字符串类型,如果性别没有指定,默认为男 Person.defaultProps = { sex: '未知', age: 18 } 3. 年龄为数字类型,必须指定 4. 给某个组件添加dance函数,限制dance只能是函数类型
javascript 复制代码
ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))

function dance() {
    console.log(' be good at dancing')
}

Person.propTypes = {
    dance: PropTypes.func
}

在函数的render函数中打印console.log(this),可以查看渲染数据的结果

props的性质和作用

  1. 每个组件对象都会有props属性
  2. 组件标签的所有属性都保存在props中
  3. 通过标签属性从组件外向组件内传递变化的数据。
  4. 注意:组件内部不要修改props的值

注意可以运算不可以修改。运算和修改的区别如图所示

用法

内部读取某个属性值this.props.name

在render函数里面

arduino 复制代码
console.log(this.props.name)

对props中的属性值进行类型限制和必要性限制

  1. 第一种方式(React v15.5开始已弃用) Person.propTypes = { name: React.PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 若一直在React身上加PropTypes属性,那么React核心对象会很大。

  2. 使用 prop-types库对标签属性进行限制,React代码打包之后会更小一些

    ini 复制代码
     <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
      <script type="text/babel">
          Person.propTypes = {
             name:PropTypes.string.isRequired,
             sex: PropTypes.string,
             age: PropTypes.number
         }
      </script>
  3. 拓展属性:将对象的所有属性通过props传递 const person3 = { name: '双下巴', age: 23, sex: '不 明' } ReactDOM.render(<Person {...person3} />, document. getElementById('test3'))

  4. 默认属性值 Person.defaultProps = { 属性:值 }

  5. 类式组件类中的构造函数

kotlin 复制代码
  constructor(props) {
                super(props)
                this.state = { 属性:值}
                // 解决changeWeather中this指向的问题
                this.组件实例新属性名称 = this.自定义函数.bind(this)
            }

props的基本形式

xml 复制代码
  <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/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>
                )
            }
        }
        ReactDOM.render(<Person name="jerry" age="19" sex="男" />, document.getElementById('test1'))
        ReactDOM.render(<Person name="Lilly" age="18" sex="女" />, document.getElementById('test2'))
        ReactDOM.render(<Person name="双下巴" age="23" sex="不明" />, document.getElementById('test3'))
    </script>

运行截图

批量传递props

花括号加展开运算符接收数据

复制代码
{...数组或者集合}

介绍一下展开运算符

javascript 复制代码
        let arr1 = [1, 3, 5, 7, 9]
        let arr2 = [1, 2, 3, 4]
        console.log(...arr1);//展开一个数组
        let arr3 = [...arr1, ...arr2]//连接数组
        console.log('arr3:', arr3)
        function sum(...numbers) {
            return numbers.reduce((preValue, currentValue) => {
                return preValue + currentValue
            })
        }
        console.log(sum(1, 2, 3, 4));//10
ini 复制代码
     let person = { name: 'tom', age: 18 }
     console.log(...person);展开运算符不能展开对象

报错信息 Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function 展开运算符不能展开对象。

对传递的标签属性进行类型限制,必要性限制和默认设置。React15使用以下代码进行标签属性限制

ini 复制代码
        Person.propTypes = {
            name: React.PropTypes.string
        }

React16版本及其以后不再从React身上直接取属性,因为这样可能会使得React变得臃肿。使用prop-types.js,然后

xml 复制代码
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

props的简写方式

如果想要把标签属性的限制和默认值相关代码放在组件类的内部,可以尝试下面的写法(写在组件里面,和render函数是并列关系)

yaml 复制代码
static propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    dance: PropTypes.func
};
static defaultProps = {   
    sex: '未知',
    age: 18
}

测试这段代码是否可行,可以将渲染组件到页面的代码去掉性别,dance直接赋值,如果生效会显示关于属性限制的相关的报错

类式组件中的构造器与props

通常在React中,构造函数仅用于以下两种情况

  1. 通过给this.state赋值对象来初始化内部state
  2. 为事件处理函数绑定实例

构造器是否接收props,是否传递给super取决于是否希望在构造器上通过this访问props

undefined打印了三次是因为页面中有三次渲染

函数式组件使用props

最新的React建议使用函数式组件而不是类式组件。

this.state.x,this.props.name中的this是组件实例对象,函数式组件中没有this,不能state,refs,但是可以props

xml 复制代码
    <script type="text/babel">

        function Predecessor() {
            const { name, age, address } = props
            return (
                <ul>
                    <li>name:{name}</li>
                    <li>age:{age}</li>
                    <li>address:{address}</li>
                </ul>
            )
        }
        ReactDOM.render(<Predecessor name='LS' age='18' address='Mars' />, document.getElementById('demo1'))
    </script>

props未定义的原因是没有在函数的参数里接收props

上面代码中从函数参数中读取属性也可以写解构的形式

css 复制代码
 function Predecessor({ name, age, address }) {
            return (
                <ul>
                    <li>name:{name}</li>
                    <li>age:{age}</li>
                    <li>address:{address}</li>
                </ul>
            )
        }

代码的解构和从函数参数中读取属性是等价的。注意不要忘记花括号,因为属性的集合是一个对象。

对函数式组件属性的限制写在function外部。

最新版的React建议使用函数式组件,所以函数式组件使用props值得关注。

相关推荐
zwjapple42 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python