React prop属性详解

最新推荐文章于 2025-05-30 21:57:11 发布

原创最新推荐文章于 2025-05-30 21:57:11 发布 · 808 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解React组件的Props属性，包括其作用、读取方式、类型限制、必要性限制及默认值设定。通过实例演示如何在组件间传递数据，确保组件的灵活性与复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>

<ul>
  <li>姓名: 张三</li>
  <li>性别: 女</li>
  <li>年龄: 23</li>
</ul>
<hr>

<div id="example"></div>
<div id="example2"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
  组件3大属性之一: props属性
  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中
  3. 内部读取某个属性值: this.props.propertyName
  4. 作用: 通过标签属性从组件外向组件内传递数据(只读)
  5. 对props中的属性值进行类型限制和必要性限制
    Person.propTypes = {
      name: React.PropTypes.string.isRequired,
      age: React.PropTypes.number.isRequired
    }
  6. 扩展属性: 将对象的所有属性通过props传递
    <Person {...person}/>
  7. 默认属性值
    Person.defaultProps = {
      name: 'Mary'
    };
  8. 组件类的构造函数
    constructor (props) {
      super(props);
      console.log(props); // 查看所有属性
    }
  问题: 为什么要设计对prop会进行约束的语法?
  */
  /*
  需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
    1). 如果性别没有指定, 默认为男
    2). 如果年龄没有指定, 默认为18
  */
  // 定义组件
  class Person extends React.Component{
    render(){
      console.log(this instanceof Person);
      console.log(this.props);
      return (
          <ul>
            <li>姓名：{this.props.name}</li>
            <li>年龄：{this.props.age}</li>
            <li>性别：{this.props.sex}</li>
          </ul>
      )
    }
  }
  // 规定组件props属性的默认值
  Person.defaultProps = {
    sex: '女'
  };
  // 规定当前组件props数据传入的必要性，数据类型限制。
  Person.propTypes = {
    name:PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    sex: PropTypes.string.isRequired
  }
  let person = {name: 'kobe', age: 39, sex: '男'};
  let person2 = {name: 'wade', age: 36, sex: '男'};
  // 渲染组件
  // ReactDOM.render(<Person name={person.name} age={person.age} sex={person.sex}/>, document.getElementById('example'));
  ReactDOM.render(<Person name={person.name} age={person.age} />, document.getElementById('example'));
  // ReactDOM.render(<Person name={person2.name} age={person2.age} sex={person2.sex}/>, document.getElementById('example2'));
  ReactDOM.render(<Person {...person2}/>, document.getElementById('example2'));
</script>
</body>
</html>

一个好的React组件应该多传入的propers做必要性的限制,比如规定某些prop必须传入,否则报错.

因为设计组件的人不一定是使用组件的人.

所以定义成isRequired.