React 进阶（七）：props 属性介绍

2021 年 12 月 17 日
本文字数：853 字
阅读完需：约 3 分钟

一、前言

如果需要在React组件之间进行传值，那么props属性就起到了这个作用,在React中props和state是两个非常重要的属性。

state 和 props 主要区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

Note:属性是用于设置默认值，不改变的值使用props,改变的值使用state.

每个组件对象都会有props（properties的简写）属性;
组件标签的所有属性都保存在props中;
内部读取某个属性值：this.props.propertyName;
作用：通过标签属性从组件外向组件内传递数据（只读 read only）;
对props中的属性值进行类型限制和必要性限制;

Person.propTypes = {    name: React.PropTypes.string.isRequired,    age: React.PropTypes.number.isRequired}

复制代码

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

<Person {...person}/>

复制代码

默认属性值

Person.defaultProps = {  name: 'Mary'};

复制代码

二、Demo

/*   1. 拆分组件: 拆分界面, 抽取组件     * 单个标题组件: Welcome     * 应用组件: App   2. 分析确定传递数据和数据类型     * Welcome: props.name  string     * App: props.names    array   */
  //定义内部标题组件  class Welcome extends React.Component {    render() {      return <h2>Welcome {this.props.name}!</h2>;    }  }  Welcome.propTypes = {    name: React.PropTypes.string.isRequired  };  //定义外部应用组件  class App extends React.Component {    render() {      return (        <div>          {            this.props.names.map(              (name, index) => <Welcome name={name} key={index}/>            )          }        </div>      );    }  }  App.propTypes = {    names: React.PropTypes.array.isRequired  };
  var names = ['Tom', 'Jack', "Bob"];  ReactDOM.render(<App names={names}/>, document.getElementById('example'));