react 组件的三大属性—props

最新推荐文章于 2024-08-28 08:14:12 发布

胡椒粉0121

最新推荐文章于 2024-08-28 08:14:12 发布

阅读量730

点赞数 1

分类专栏：前端MVVM框架—React

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/96483263

版权

前端MVVM框架—React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Props的介绍

每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都保存在props中，所有组件标签的属性的集合对象

作用：通过标签属性从组件外向组件内传递变化的数据，注意: 组件内部不要修改props数据

首先来看一下一个简单的实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>
 
<div id="example1"></div>
<div id="example2"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 1.定义组件
  function Person(props) {
    return (
      <ul>
        <li>姓名：{props.name}</li>
        <li>年龄：{props.age}</li>
        <li>性别：{props.sex}</li>
      </ul>
    )
  }
 
  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('example1'))
</script>
</body>
</html>

类型限制和必要性限制

对props中的属性值进行类型限制和必要性限制，使用比较新的react版本，需要引入prop-types.js这个文件

props的数据类型具体查看官方文档：https://react.docschina.org/docs/typechecking-with-proptypes.html

// 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传，如果有默认值就不会报错
    age: PropTypes.number.isRequired
}

扩展属性: 将对象的所有属性通过props传递

// ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))

默认属性值

如果某个props的值设置了默认值，并且设置了必要性限制，那么即使没有传递这个props也不会报错

// 指定属性的默认值
Person.defaultProps = {
  age: 18,
  sex: '男'
}

组件的构造函数

function Person(props) {
    return (
      <ul>
        <li>姓名：{props.name}</li>
        <li>年龄：{props.age}</li>
        <li>性别：{props.sex}</li>
      </ul>
    )
  }

Props的使用场景（父子组件之间通信）

Props的使用场景—父组件向子组件传递数据

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

如果性别没有指定, 默认为男
如果年龄没有指定, 默认为18

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>
 
<div id="example1"></div>
<div id="example2"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
  // 1.定义组件
//  function Person(props) {
//    return (
//      <ul>
//        <li>姓名：{props.name}</li>
//        <li>年龄：{props.age}</li>
//        <li>性别：{props.sex}</li>
//      </ul>
//    )
//  }
 
  class Person extends React.Component {
    render () {
      return (
        <ul>
          <li>姓名：{this.props.name}</li>
          <li>年龄：{this.props.age}</li>
          <li>性别：{this.props.sex}</li>
        </ul>
      )
    }
  }
 
  // 指定属性的默认值
  Person.defaultProps = {
    age: 18,
    sex: '男'
  }
 
  // 对props中的属性值进行类型限制和必要性限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传
    age: PropTypes.number.isRequired
  }
 
  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  const p2 = {
    name: 'jack',
    age: 13,
    sex: '男'
  }
 
  // ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
  ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
  ReactDOM.render(<Person name={p2.name} age={p2.age}/>, document.getElementById('example2'))
</script>
</body>
</html>

上面组件没有状态（state），可以直接使用工厂函数的方式创建组件

Props的使用场景—子组件向父组件传递数据（实际传递的是一个自定义事件）

需求将子组件中的size状态值传递给父组件，是由子组件触发传递的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    class Fathercomponent extends React.Component {
        state = {
            size: 0
        }
        constructor (props) {
            super (props)
        }

        getSize = (size) => {
            this.setState({
                size: size
            })
        }

        render () {
            return (
                <div>
                    <div>子组件的size为：{this.state.size}</div>
                    <Childcomponent getSize={this.getSize}/>
                </div>
            )
        }
    }

    class Childcomponent extends React.Component {
        static propTypes = {
            getSize: PropTypes.func.isRequired
        }
        state = {
            size: 80
        }
        constructor (props) {
            super(props)
        }
        transmitSize = () => {
            let size = this.state.size
            this.props.getSize(size)
        }
        render () {
            return (
                <div onClick={this.transmitSize}>把我的size传给父组件</div>
            )
        }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<Fathercomponent />, document.getElementById('example'))
</script>
</body>
</html>