基本使用

• app.jsx

import React, {Component} from 'react';
import Navbar from "./Navbar";

class App extends Component {

  render() {
    // 当对象的属性值和 props 的键一样的时候, 可以使用展开运算符
    const indexProps = {
      title: '首页',
      leftShow: false
    }

    return (
      <div>
        <div>
          <Navbar {...indexProps}></Navbar>
        </div>
        <div>
          <Navbar title='列表' leftShow={true}></Navbar>
        </div>
        <div>
          <Navbar title='购物车' leftShow={true}></Navbar>
        </div>
      </div>
    );
  }
}

export default App;

• Navbar.jsx

import React, {Component} from 'react';

class Navbar extends Component {
  render() {
    const {title, leftShow} = this.props
    return (
      <div>
        {leftShow && <button>返回</button>}
        {title}
        <button>home</button>
      </div>
    );
  }
}

export default Navbar;

属性验证

• 沿用上面的 app.jsx 和 Navbar.jsx
• Navbar.jsx

import React, {Component} from 'react';
import propTypes from 'prop-types';

class Navbar extends Component {
  // 属性名不能改变
  static propTypes = {
    title: propTypes.string,
    leftShow: propTypes.bool
  }

  // 设置默认值
  static defaultProps = {
    leftShow: true
  }

  ...
}

export default Navbar;

属性和状态的异同

相同点

• 都是 js 对象, 都会触发 render 更新

  不同点

• 属性能从父组件获取和修改, 状态不能
• 两者都可以设置默认值, 但是设置方式不同
• 属性不可以在组件内部修改, 但是状态可以
• 属性可以设置或者修改子组件中的初始值, 但是状态不可以